Как выбрать все / снять все флажки, которые не отключены?

Question

У меня есть несколько входов флажков, в то время как некоторые из них отключены. Поэтому, когда я нажимаю кнопку "Выбрать все / снять все флажки вверху", я хочу применить это событие только для включенных флажков. Кроме того, когда я установил все флажки, нажав на каждый из них, необходимо установить флажок "Выбрать все".

Примечание: у меня также есть одна функциональность, когда установленный флажок установлен, а затем нажатие кнопки сохранения, этот конкретный флажок будет отключен. Я могу добавить новый флажок, используя кнопку добавления нового флажка. При добавлении нового флажка флажок "выбрать все / снять все" должен быть снят.

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

скрипка

Answer 1

Для обнаружения отключенных флажков вы можете использовать jquery filter метод как это:

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

используя filter таким образом, JQuery меняет флажки, которые не имеют отключенного атрибута.

и использовать .prop('checked', false) или же .attr('checked', false) снять флажки при добавлении новой кнопки флажка.

поэтому, чтобы снять отметку, выберите все при сохранении и добавьте флажок использовать:

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

и снять все включенные флажки при использовании addcheckbox:

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

Вы также должны использовать $(document).on("click",".checkBoxClass",function(){}) связыватель, чтобы позволить JQuery связывать click событие для динамически добавленных флажков. сделав это и добавив несколько дополнительных jquery, установите флажок "все", отметьте, когда установлены все флажки.

Обновленная скрипка

Answer 2

Вот еще один метод. Вместо того, чтобы использовать filter я использовал :enabled, Также используется on JQuery для обнаружения новых добавленных флажок. Надеюсь, это поможет вам.

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

демонстрация

Answer 3

Попробуйте это, он получит только включить флажок и выбрать / отменить их выбор.

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

проверьте скрипку http://jsfiddle.net/p73wW/8/

Answer 4

Попробуй это:

$(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>')
});
});

Обновленная скрипка