Jquery chọn tất cả nếu không tắt

Question

Tôi đang sử dụng tập lệnh sau để chọn tất cả các hộp kiểm với một lớp nhất định.

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

}); 

Tuy nhiên, tôi gặp sự cố khi chọn/bỏ chọn tất cả hộp kiểm có thể bỏ/chọn hộp kiểm bị tắt.

Tôi cố gắng này

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

}); 

Nhưng nó không hoạt động. Tôi đã thực hiện một jsfiddle để trình bày sự cố http://jsfiddle.net/e67Fv/

Answer 1

Hm ... interresting nỗ lực, nhưng bạn không thể sử dụng một đối tượng jQuery bên trong một selector, như bộ chọn chỉ là một chuỗi đồng bằng .

Bộ chọn để loại trừ các yếu tố tàn tật sẽ :not(:disabled), do đó, mã của bạn nên là:

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

Lưu ý rằng bạn có thể gọi chuỗi, vì vậy bạn không cần phải chọn các mục hai lần:

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

Answer 2

Sử dụng tính năng combonation của các chức năng .not() và :disabled để loại trừ những điều này.

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

.not() cũng tồn tại như một selector như :not() và có thể được sử dụng như sau:

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

Answer 3

Dưới đây là những gì tôi thường làm:

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

Tôi hy vọng nó sẽ giúp :)

Answer 4

Điều này không giống như mã ban đầu của bạn. Nó sẽ chỉ kích hoạt sự thay đổi cho những người không bị thay đổi. Tôi đã assummed bạn muốn kích hoạt thay đổi cho tất cả các lần bạn đã thay đổi

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