CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc-5
Jean B
Jean B

Reputation: 341

Disable CheckBox Dynamically using JQuery

I have a collection of checkboxes within a form. I am looping through the collection to check and/or disable the checkboxes. The checking works fine; however, I am having an issue with checking if the checkbox is disabled or not. It always return false even when the checkbox is enabled. I looked at the code over and over, and I could not see a anything that could cause this to happen.

Partial HTML File

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

//This is how I disable the checkbox

 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;
             }
         }
     }

//The rendering HTML

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

//checking if the field is disabled or not

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

//The above code always return false. Why is that?

I added a screen shot of the checkbox property showing that the checkbox is automatically checked and disabled. Even though the checkbox is rendering as disabled, the property does not show it as being disabled.

enter image description here

Upvotes: 1

Views: 1509

Answers (3)

Jean B
Jean B

Reputation: 341

I was not able to read the property using $('#Accounting').is(':checked'); however, I was able to read them using the syntax below.

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

Upvotes: 0

zer00ne
zer00ne

Reputation: 44086

Use === instead of ==

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

Upvotes: 1

rahul
rahul

Reputation: 187110

You can't have multiple elements with the same id. In your looping structure you can add the index of the loop also to the id, so that it will be unique. (Accounting1, Accounting2...)

Change your code to something like this

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

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

http://jsfiddle.net/eanamztz/

Upvotes: 1

Related Questions