JQuery выбрать все, если не отключено

Я использую следующий script, чтобы выбрать все флажки с заданным классом.

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').trigger("change");
    });

});

Однако у меня возникла проблема, так как флажок de/select all позволяет деблокировать/выбирать флажки, которые отключены.

Я пробовал это

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + !$(:disabled) + ']').trigger("change");
    });

});

Но это не сработает. Я сделал jsfiddle, чтобы продемонстрировать проблему http://jsfiddle.net/e67Fv/

Ответ 1

Hm... interresting попытка, но вы не можете использовать объект jQuery внутри селектора, поскольку селектор - это просто простая строка.

Селектор для исключения отключенных элементов будет :not(:disabled), поэтому ваш код должен быть:

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");
  });
});

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

$(document).ready(function(){
  $(':checkbox.selectall').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked")).trigger("change");
  });
});

Ответ 2

Используйте комбинацию функций .not() и :disabled, чтобы исключить их.

$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').prop("checked", $(this).prop("checked"));
$(':checkbox[class='+ $(this).data('checkbox-name') + ']').not(':disabled').trigger("change");

.not() также существует как селектор как :not() и может использоваться следующим образом:

 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').prop("checked", $(this).prop("checked"));
 $(':checkbox[class='+ $(this).data('checkbox-name') + ']:not(:disabled)').trigger("change");

Ответ 3

Вот что я обычно делаю:

$(function(){
    $(".selectall").live('change', function(){
        if($(this).is(":checked"))
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "true");
        }
        else
        {
            $("input:checkbox:not(:disabled)." + $(this).data('checkbox-name')).prop("checked", "false");
        }
    });
});

Надеюсь, это поможет:)

Ответ 4

Это не то же самое, что и исходный код. Это только вызовет изменение для тех, которые не были изменены. Я предположил, что вы хотите вызвать изменения для всех, как только вы изменили

$(':checkbox.selectall').on('click', function(){
        $(':checkbox .'+ $(this).data('checkbox-name')).not(':disabled').prop("checked", $(this).prop("checked")).trigger("change");
    });