2013-03-07 34 views
23

Tôi gặp sự cố khi tìm ra lý do cho hành vi jquery/checkbox sau đây.jquery attr ('checked', 'checked') chỉ hoạt động một lần

$(this.obj + ' table.sgrid-content > thead > tr > th > input.select_all').on('click' , {grid:this} , function(event){ 

var grid = event.data.grid; 

if($(this).is(':checked')){ 

    $(grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ').attr('checked','checked'); 
    $(grid.obj + ' .sgrid-content > tbody > tr > td > input.select ').parents('tr').addClass('ui-state-highlight'); 

} else { 

    $(grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ').removeAttr('checked'); 
    $(grid.obj + ' table.sgrid-content > tbody > tr > td > input.select ').parents('tr').removeClass('ui-state-highlight'); 

} 

}); 

Mã này được thiết kế để làm việc như sau: - click vào input.select_all gây nên sự kiện - nếu input.select_all được kiểm tra: kiểm tra thêm thuộc tính cho tất cả các hộp kiểm được đánh dấu là .Chọn trong table.sgrid- content - nếu không: xóa thuộc tính 'checked' khỏi tất cả các mục input.select.

Tuy nhiên, một chức năng lưới đơn giản khác. Và nó hoạt động. Phần kỳ lạ là, nó chỉ hoạt động một lần. Theo ý tôi, bạn có thể chọn tất cả các hộp kiểm và bỏ chọn chúng. Sau khi hoạt động "Chọn tất cả" chức năng ngừng hoạt động.

Một điều kỳ lạ là, khi tôi kiểm tra các yếu tố dom với firebug tất cả họ trở thành kiểm tra = 'kiểm tra' attr như họ cần, nhưng họ hiển thị và hành xử như họ đã không được kiểm tra.

Bộ chọn hoạt động đúng cách. Phần mã có thêm/xóa ui-state-highlight hoạt động mọi lúc.

Lời explenation: lưới - là đối tượng mà tôi vượt qua để có được grid.obj (về cơ bản ID của một div ceratain)

Xin vui lòng cho tôi ý kiến ​​của bạn.

+5

sử dụng '.prop ('kiểm tra', true) và .prop ('kiểm tra', false) 'thay vì' .attr ('kiểm tra', 'kiểm tra') hoặc .removeAttr'. attr cho thao tác kiểm tra/trạng thái được chọn hiện không được chấp nhận trong jQuery – codefreak

+1

cảm ơn, bây giờ khi bạn đề cập đến nó, vấn đề bắt đầu sau khi nâng cấp jquery lib. Cảm ơn rất nhiều, không biết điều đó! – PiWo

Trả lời

69

Sử dụng prop ('kiểm tra', true/false) thay vì removeAttr

$('input[name=foo]').prop('checked', true); 
$('input[name=foo]').prop('checked', false); 
+1

sử dụng .prop thay vì .attr – codefreak

+2

đã cứu tôi đau đầu quá :) – NDJ

+0

điều này cũng hữu ích cho tôi. cảm ơn. Tôi cũng có một truy vấn. Sự khác biệt giữa prop và attr là gì? không phải cả hai đều làm cùng một công việc? –

0

Bạn có thể thay đổi các thuộc tính, và đó cũng sẽ thay đổi thuộc tính, nếu phần tử là không bị ảnh hưởng. Khi phần tử rời khỏi trạng thái ban đầu này, việc thay đổi thuộc tính không còn ảnh hưởng đến thuộc tính. Hành vi chính xác có thể khác nhau giữa các trình duyệt.

Instead of .attr('checked', 'cheked') use .prop('checked', true)

Các vấn đề liên quan