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