CODEWITHSUNDEEP
jquerycheckboxdisabled-input
Christine268
Christine268

Reputation: 732

Check All Not Disabled

Researching on here I found code that checks if a checkbox is disabled and I am attempting to implement it into my code with no luck.

HTML:

<input type="checkbox" name="file1" id="pdf1" class = "pdffiles" value="101SP01.dwg" disabled="disabled"/><label for="pdf1"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
<input type="checkbox" name="file2" id="pdf2" class = "pdffiles" value="101SP02.dwg" /><label for="pdf2"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />

JQuery:

function pdf(source) {
  $('input[name=pdffiles]').each(function(){
    if(!$(this).attr('disabled'))
      checkboxes[i].checked = source.checked;
  };
};

When I click the checkbox that selects all, it still selects all. Here is the previously working code that selects all as well (before I made the above changes):

function pdf(source) {
  checkboxes = document.getElementsByClassName('pdffiles');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

The goal is to check only the checkboxes that are not disabled.

Also, incase this helps, here is the checkbox that is clicked that runs the code:

<input type="checkbox" onClick="pdf(this)" class = "hidden-xs hidden-sm">

Oh and also, I have tried .prop instead of .attr

The Fiddle code provided below works perfectly! But I don't understand why it is not applying to my code:

function pdf(source) {
$('.pdffiles').not(':disabled').prop('checked', source.checked);

};

And I didn't change anything else..

Something else must be enabling the select all, but I cannot figure out what in the code I am editing.

I marked this question as answered because the code provided works perfectly. Something else in my own code is causing the select all. The code I am working on isn't my own but instead a co-workers, so I will have to try to work with him on getting figuring that part out I appreciate the help!

Upvotes: 1

Views: 3302

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388326

You can use .not() with disabled-selector to exclude the disabled elements, also note that pdffiles is a class not name

function pdf(source) {
    $('input.pdffiles').not(':disabled').prop('checked', source.checked);
};

Demo: Fiddle

Upvotes: 4

Wahyu Kodar
Wahyu Kodar

Reputation: 674

for example:

$('.pdffiles').not(':disabled').prop('checked', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="file1" id="pdf1" class = "pdffiles" value="101SP01.dwg" disabled="disabled"/><label for="pdf1"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
<input type="checkbox" name="file2" id="pdf2" class = "pdffiles" value="101SP02.dwg" /><label for="pdf2"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />

Upvotes: 0

Related Questions