How to select all/unselect all the check boxes which are not disabled?

Question

I've multiple checkbox inputs while some them are disabled. So when I click select all/unselect all the checkbox at the top, I want to apply this event for the only enabled check boxes. Also when I've all the checkboxes checked by clicking on each one, then the select all checkbox must be clicked.

Note : Also I've one functionality, when the enabled checkbox is clicked and followed by the save click, then that particular checkbox will be disabled.I can add a new checkbox using add new checkbox button. When a new checkbox is added the select all/unselect all checkbox must be unchecked.

HTML

<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
  </tr>
</table>
<button id="add">
  Add check box
</button>
<button id="save">
  Save
</button>

JQuery

$(document).ready(function() {
  $("#ckbCheckAll").click(function() {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
  });
});
$(document).ready(function() {
  $('.checkBoxClass').click(function() {
    var selected = $('.checkBoxClass').length;
    if ($('.checkBoxClass:checked:enabled').length === selected) {
      $('#ckbCheckAll').prop('checked', true);
    } else {
      $('#ckbCheckAll').prop('checked', false);
    }
  })
});
$(document).ready(function() {
  count = 5;
  $('#save').click(function() {
    $('.checkBoxClass').each(function() {
      if ($(this).is(':checked')) {
        $(this).prop('disabled', true);
      }
    })
  });
  $('#add').click(function() {
    count = count + 1;
    $('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
  });
})

Fiddle

Answer 1

To detect disabled check boxes you can use jquery filter method like this:

$(".checkBoxClass").filter(function(){
    return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));

by using filter like this, JQuery changes checkboxes that have not disabled attribute.

and use .prop('checked', false) or .attr('checked', false) to uncheck checkboxes on add new checkbox button.

so to uncheck select all on save and add checkbox use:

$("#ckbCheckAll").attr('checked', false);

and to uncheck all enabled checkboxes on addcheckbox use:

$(".checkBoxClass").filter(function(){
    return !$(this).attr('disabled');
}).prop('checked', false);

You should also use $(document).on("click",".checkBoxClass",function(){}) binder to let JQuery bind click event for dynamically added checkboxes. by doing that and add some extra jquery, select all checkbox, checked when ever all checkboxes are checked.

Updated Fiddle

Answer 2

try this, it will get only enable checkobox and select/unselect them.

$(document).ready(function() {
  $("#ckbCheckAll").click(function() {
    $(".checkBoxClass:enabled").prop('checked', $(this).checked);
  });
});

check fiddle http://jsfiddle.net/p73wW/8/

Answer 3

Try this :

$(document).ready(function() {
$("#ckbCheckAll").click(function() {
      var checked = false;
      if($(this).prop('checked') == true) {
          checked = true;
      }
      $("#myTable tbody tr").each(function() {
          if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
              $(this).find(".checkBoxClass").prop('checked', checked);
          }
      });
});

$('.checkBoxClass').click(function() {
    var i = 1;
    var totalCheckboxes = $("#myTable tbody tr").length;
    if($(this).prop('checked') == true) {
        $("#myTable tbody tr").each(function() {
            if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
                if($(this).find(".checkBoxClass").prop('checked') == true) {
                    i++;
                }
            }
        });
    }
    if(i==totalCheckboxes) {
        $("#ckbCheckAll").prop('checked', true);
    } else {
        $("#ckbCheckAll").prop('checked', false);
    }
});

count = 5;
$('#save').click(function() {
    $('.checkBoxClass').each(function() {
        if ($(this).is(':checked')) {
            $(this).prop('disabled', true);
        }
    });
    $("#ckbCheckAll").prop('checked', false);
});

$('#add').click(function() {
    count = count + 1;
    $('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});

Updated Fiddle

Answer 4

Here is another method. Instead of using filter I have used :enabled. Also used on jquery to detect new added checkbox. Hope it will help you.

$(document).on('click','.checkBoxClass',function() {
        var selected = $('.checkBoxClass:enabled').length;
    if ($('.checkBoxClass:checked:enabled').length === selected) {
      $('#ckbCheckAll').prop('checked', true);
    } else {
      $('#ckbCheckAll').prop('checked', false);
    }
})

demo