Disable CheckBox Dynamically using JQuery

Question

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.

Are you sure it returns false ? For me, it gets me "true". jsfiddle.net/j9ruj62q — DinoMyte
– DinoMyte, Commented Nov 30, 2015 at 22:42
I kept paying around with it, and the value was always false. I cleared my cache and tried different browser with the same result. — Jean B
– Jean B, Commented Dec 1, 2015 at 0:20
I saw your answer and made the changes, it did not work. The html is rendering correctly on the modal popup; I can see that the correct options are disabled and checked. The main problem is checking to see if the checkbox is disabled when the user click on update. Using the var isAccountingDisabled = $('#Accounting').is(':disabled'); should have worked given the id #Accounting is unique and disable. I also tried the javascript way var test = document.getElementById('Accounting').disabled;. This too return false always. — Jean B
– Jean B, Commented Dec 1, 2015 at 2:00
I grabbed the rendering html file and tried it there, and it works fine and give me the expected result. jsfiddle.net/eanamztz/13 — Jean B
– Jean B, Commented Dec 1, 2015 at 2:17

rahul · Accepted Answer · 2015-11-30 23:05:13Z

1

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/

edited Nov 30, 2015 at 23:05

answered Nov 30, 2015 at 22:50

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DinoMyte Over a year ago

ah nice catch. Didn't notice that in the question.

Jean B Over a year ago

Each check box has a unique id, and they are already in the collection. I used a for loop to check and uncheck items in the collection. In addition, I use the same collection to disable and enable the appropriate field. That part work fine. The issue is when I am trying to see if the field is disabled or not. It is always returning false even thought I can see the item is enable. I checked the collection, and it has the correct id and name for each item within the collection. I updated the code to include the collection.

Jean B Over a year ago

I noticed that If I changed var isAccountingDisabled = $('#Accounting').is(':enabled');, the result is always true.

rahul Over a year ago

If your generated ids are unique, then you can't use '$("#Accounting")', use the appropriate selector for that element and try checking the disabled attribute

zer00ne · Accepted Answer · 2015-12-01 01:49:53Z

1

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

answered Dec 1, 2015 at 1:49

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Comments

Jean B · Accepted Answer · 2015-12-01 15:08:38Z

0

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

answered Dec 1, 2015 at 15:08

Jean B

3411 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Disable CheckBox Dynamically using JQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related