Question

我的清单上有复选框。当您单击任何复选框时，属于它的输入将变为不可见。我使用了以下javascript函数。但是没有。

我的js函数：

function ActivePassive() {

    var list = document.getElementsByClassName("switchery");

    for (var i = 0; i < list.length; i++) {
        if (liste[i].checked) {
            console.log("aa"); // if checked = true, it write aa.
            document.getElementById("focus").style.display = 'block'; //but it doesn't work
            }
        else {
            console.log("bb"); // if checked = false, it write bb.
            document.getElementById("focus").style.display = 'none'; //but it doesn't work
            }
    }
}

mt html代码：

        <td>
             <div class="form-group">
                <div class="col-md-10">
                   <div class="checkbox checkbox-switchery">
                       <label>
                    @Html.CheckBoxFor(modelItem => Model[i].status, new {  @class = "switchery" , @onchange = "ActivePassive()" })
                  <label class="label-rounded bg-blue-300">
                      Yes/No
                        </label>
                    </label>
                  </div>
             </div>
          </div>
      </td>


 <td>
      <div id="focus" class="col-md-4">
            <div class="form-group has-feedback has-feedback-left">
                     @Html.EditorFor(modelItem => Model[i].Value, new { htmlAttributes = new { @class = "form-control" } })
                       @Html.ValidationMessageFor(modelItem => Model[i].Value, "", new { @class = "text-danger" })
                  </div>
            </div>
       </td>

Answer 1

您将需要更新代码，以便可以正确地引用要切换其显示的项目，并从复选框中建立对其的引用。是的，有很多方法可以给这只猫换皮，但这是一种尝试以最小的重构帮助OP。

更新您的复选框以包括一个包含索引的属性：

@Html.CheckBoxFor(modelItem => Model[i].status, new {  @class = "switchery" , @onchange = "ActivePassive(event)", data_chkbox_index = i })

更新您的元素ID以包括索引，这样可以确保ID是唯一的：

<div id="focus-@i">

更新您的功能以使用实际的目标复选框（无需遍历所有对象）并仅在特定元素上更新显示内容：

function ActivePassive(event) {
    //this is the actual clicked item
    var chkbox = event.target;
    //get the index from the checkbox
    var index = chkbox.getAttribute('data-chkbox-index');
    //determine what display value to set based off the checkbox
    var display = chkbox.checked? 'block' : 'none';

    //finally set the display value referencing the element ID with the index
    document.getElementById("focus-" + index).style.display = display;
}

HTH

Answer 2

更新：我已解决 我捕获了所选复选框的索引值。我在输入的ID旁边找到了输入的索引值。我执行了与脚本中相同的功能。 我这样解决了

DateTimeField

2019-08-22 03:26:40

单击复选框将输入更改为CSS

2 个答案: