Kendo UI ASP.NET MVC-网格-使用JavaScript隐藏复选框

Kendo UI ASP.NET MVC - Grid - Hide Checkbox using JavaScript

本文关键字：使用 JavaScript 隐藏 复选框 网格 UI ASP NET MVC- Kendo      更新时间：2023-09-26

我想根据我拥有的类型变量显示或隐藏Checkbox（）。

该复选框呈现在剑道网格的弹出"编辑"对话框中。这是在编辑器模板中-代码如下：

@model Publication
@Html.HiddenFor(model => model.DocumentUpdateId)
<div class="editor-label">
    @Html.LabelFor(model => model.PublicationTime)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .DatePicker()
        .Name("PublicationTime")
    )
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.PdfModifiedDate)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .Upload()
        .Name("PdfModifiedDate")
        .Multiple(false)
        .Async(a => a
                .Save("UploadFile","Home")
        )
        .Events(events => events
            .Upload("OnImageUpload")
        )
    )
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Carousel)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .CheckBox()
        .Name("Carousel")
    )
</div>

我希望能够访问复选框并根据文档类型隐藏它。My OnEdit事件运行并呈现日历的正确日期，但不会隐藏复选框：

function OnEdit(e) {
  console.log("OnEdit");
  console.log(e);
  // set the default date
  var pt = $('#PublicationTime').data("kendoDatePicker");
  pt.value(new Date());
  var vm = e.model,
    container = e.container,
    docType = vm.DocumentType;
  vm.PublicationTime = new Date();
  vm.dirty = true;
  console.log(vm.DocumentType);
  console.log(docType.indexOf("Sector"));
  if (docType.indexOf("Sector") < 0) {
    console.log("inside if statement")
    console.log(container.find("#Carousel"));
    container.find("#Carousel").hide();
  }
}

Kendo文档中没有任何关于访问复选框的内容。我还尝试在OnEdit事件中创建一个复选框，但也没有成功——只是看起来不可能。

因为kendo复选框不仅仅是一个简单的输入。。尝试将复选框放在另一个容器中，然后隐藏该容器。

<div class="carousel-checkbox">
    <div class="editor-label">
        @Html.LabelFor(model => model.Carousel)
    </div>
    <div class="editor-field">
        @(Html
            .Kendo()
            .CheckBox()
            .Name("Carousel")
        )
    </div>
</div>
if (docType.indexOf("Sector") < 0) {
    console.log("inside if statement")
    console.log(container.find("#Carousel"));
    container.find(".carousel-checkbox").hide();
}

如果只想隐藏复选框而不想隐藏标签，请将carousel-checkbox类添加到包含复选框<div class="editor-field carousel-checkbox"> 的div中

相关文章：