使用JQuery动态禁用CheckBox

Question

我在表单中有一组复选框。 我正在遍历集合以检查和/或禁用复选框。 检查工作正常； 但是，我在检查复选框是否已禁用时遇到问题。 即使启用了复选框，它也始终返回false。 我一遍又一遍地看了一下代码，没有发现任何可能导致这种情况发生的东西。

部分HTML文件

 <label class="col-lg-3"><div style="padding-left:5px;">View Department</div></label>
 <div class="col-lg-1"><input id="Accounting" name="Accounting" type="checkbox" /> </div>
 <label class="col-lg-3"> Finance</label>
 <div class="col-lg-1"><input id="Finance" name="Finance" type="checkbox" /></div>
 <label class="col-lg-3"> Marketing</label>
 <div class="col-lg-1"><input id="Marketing" name="Marketing" type="checkbox" /></div>
 <div class="col-lg-12">
 <hr style="width:100%;" />
 </div>

//这就是我禁用复选框的方式

 var collection = document.getElementById('DepartmentClassModal').getElementsByTagName('input');
     if (typeof (e) !== 'undefined') {
         if (e) {
             switch (e) {
                 case 'Education':
                     for (var i = 0; i < collection.length ; i++) {
                         if ((collection[i].id == 'Accounting') || (collection[i].id == 'Finance')) {
                             collection[i].disabled = true
                         } else {
                             collection[i].disabled = false
                         }
                     }
                     break;
             }
         }
     }

//渲染HTML

<input checked="checked" id="Accounting" name="Accounting" type="checkbox" disabled>

//检查该字段是否被禁用

var isAccountingDisabled = $('#Accounting').is(':disabled');

//上面的代码总是返回false。 这是为什么？

我添加了checkbox属性的屏幕快照，显示该复选框已自动选中并禁用。 即使该复选框呈现为禁用状态，该属性也不会将其显示为禁用状态。

Answer 1

您不能有多个具有相同id元素。 在循环结构中，您还可以将循环索引添加到id中，以使其唯一。 （ Accounting1, Accounting2... ）

将您的代码更改为这样

var checkBoxesCollection = $("#yourparentelement").find("input:checkbox[name='Accounting']");

$.each(checkBoxesCollection, function(){
    if (this.disabled) {
    };
});

http://jsfiddle.net/eanamztz/

Answer 2

使用===代替==

for (var i = 0; i < collection.length ; i++) {
                         if ((collection[i].id === 'Accounting') || (collection[i].id === 'Finance')) {
                             collection[i].disabled = true
                         } else {
                             collection[i].disabled = false
                                                 }
     }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

Answer 3

我无法使用$（'＃Accounting'）。is（'：checked'）;读取属性。 但是，我可以使用以下语法阅读它们。

   var collection = document.getElementById('DepartmentClassModal').getElementsByTagName('input');
        $.each(collection, function (index, item) {
            ListDepartments[item.name + "Disabled"] = item.disabled;
        })