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

Question

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

复选框呈现在 Kendo 网格的弹出编辑对话框中。这是在 EditorTemplate 中 - 代码如下：

@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>

我希望能够访问复选框并根据 docType 隐藏它。我的 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 事件中创建一个复选框，但这也没有用——这似乎不可能。

Answer 1

因为 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 class 添加到包含复选框 <div class="editor-field carousel-checkbox">

的 div