javascript - 在复选框上切换只读和禁用

Question

我正在使用mvc，我需要更改元素Html.CheckBoxFor的“readonly”和“disabled”属性。我为此使用了 JavaScript:

function ReadOnlyHandle() {
            var Collection = document.getElementsByClassName("SubjectCB");
            debugger;
            for (var i = 0; i < Collection.length; i++)
            {
                Collection.item(i)..("disabled", "disabled");
                Collection.removeAttribute("readonly", "readonly");
            }

        debugger;
    }

我正在尝试获取复选框的集合(因为我很少)，然后迭代它们以更改其属性。

@for (int i = 0; i < Model.Topics.Count(); i++)
                {
                    <tr id="row-@i">
                        <td>@Html.LabelFor(t => t.Topics[i].Box.Selected, Model.Topics[i].Box.Text)</td>
                        <td class="SubjectCB">@Html.CheckBoxFor(t => t.Topics[i].Box.Selected, new { @checked = "checked", @readonly = "readonly", @disabled = "disabled" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfNoDifficulltySet, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfEasy, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfMedium, new { @readonly = "readonly" })</td>
                        <td class="IsReadOnly">@Html.TextBoxFor(model => model.Topics[i].NumberOfHard, new { @readonly = "read" })</td>
                    </tr>
                }

但是，在集合中，Javascript 中定义的变量没有“removeAttribute”功能 - 为什么呢？或者我可以通过其他方式更改属性吗？

Answer 1

首先，在实际复选框而不是 td 上设置类(或为其创建另一个类):

<td>
      @Html.CheckBoxFor(t => t.Topics[i].Box.Selected, 
           new { 
                 @checked = "checked", 
                 @readonly = "readonly", 
                 @disabled = "disabled", 
                 @class = "SubjectCB" 
               }
      )
</td>

下一步..
您正在尝试从整个集合中删除一个属性。使用 disabled 应该可以更好地工作。和 readOnly :

Collection[i].disabled = false; //or true
Collection[i].readOnly = false; //or true

或者:

Collection[i].removeAttribute("readonly");

应该注意的是，readOnly 在复选框上不起作用(如果有的话)。

相反，如果您想使用类似只读的东西，可以解决发布的 here 问题。 :

<input type="checkbox" onclick="return false;" />

编辑:显然我忘记从代码中删除 .item。现已更正。