Hộp kiểm không hoạt động đúng với IE với jquery

Question

Tôi đang thử sử dụng một số hộp kiểm asp.net trên một trang, vô hiệu hóa chúng cho phù hợp.

<asp:CheckBox ID='chkMenuItem' runat='server' CssClass='HiddenText' Text='Test'  onclick='<%#String.Format("checkChild({0});", Eval("id")) %>' /> 

về javascript, Tôi đang sử dụng đoạn mã sau

function checkChild(id) { 
      for (i = 0; i < $("input[id*=hdnParentMenuItemID]").length; i++) { 
       if ($('input[id*=hdnParentMenuItemID]')[i].value.split(':')[0] == id) { 
        var childID = $('input[id*=hdnParentMenuItemID]')[i].value.split(':')[1]; 
        if ($("#" + childID).attr("disabled")) 
        //$("#" + childID).attr('disabled', ''); 
         $("#" + childID).removeAttr("disabled"); 
        else 
         $("#" + childID).attr('disabled', true); 
       } 
      } 
     } 

Bây giờ là các hộp kiểm bên bị vô hiệu hóa khi trang web được tải, phần removeAttr không hoạt động. Tôi đã cố gắng bước qua trình gỡ rối và logic hoạt động hoàn toàn tốt. Nếu các hộp kiểm không bị tắt khi tải trang, mã hoạt động tốt. Tôi đã thử thay thế 'thuộc tính' bị vô hiệu hóa bằng 'kiểm tra' để xem các thuộc tính khác có hoạt động tốt hay không và nó hoạt động hoàn toàn tốt. Tôi đã thử

$("#" + childID).attr('disabled', ''); 

nhưng nó cũng không hoạt động.

Lưu ý: Nó hoạt động hoàn hảo trên FF và Chrome nhưng không hoạt động trong IE.

Xin cảm ơn,

Answer 1

Tôi đã gặp sự cố tương tự khi bật <asp:CheckBox /> trong Internet Explorer bằng jQuery. Các mã sau đây làm việc hoàn toàn tốt trong FireFox.

$('myCheckBox').removeAttr('disabled'); 

Tuy nhiên, nó không hoạt động đúng trong IE.

An <asp:CheckBox /> được hiển thị dưới dạng <span /> với <input /> và thẻ <label />. Khi hộp kiểm bị tắt cả khoảng cách và thẻ đầu vào được trang trí với thuộc tính bị tắt. Để có được hành vi mong đợi, tôi đã sử dụng mã sau:

$('myCheckBox').removeAttr('disabled'); 
$('myCheckBox').closest('span').removeAttr('disabled'); 

Answer 2

Điều này nên rõ ràng. làm việc

$('#' + childID)[0].disabled = false; 

Answer 3

Bạn muốn một câu lệnh if như thế này

if ($("#" + childID + ":disabled").length) // is childID disabled? 
    $("#" + childID).removeAttr("disabled"); // enable it 
else 
    $("#" + childID).attr('disabled', 'disabled'); // disable it 

Answer 4

Có vô số selectors dư thừa ở đây sẽ được làm chức năng này rất kém hiệu quả. Đầu tiên, các truy vấn đang chạy cho các bộ chọn là rất chậm so với phần còn lại của mã, do đó, lưu vào bộ nhớ cache kết quả của bộ chọn của bạn và làm việc trên đó. Ngoài ra, bạn nên khai báo i với toán tử var để làm cho địa phương trở thành chức năng của bạn. Và không cần jQuery để lấy một phần tử bằng ID của nó hoặc những thứ khó hiểu sâu sắc để có được và thiết lập trạng thái vô hiệu hóa của nó, có thể được thực hiện đơn giản hơn nhiều với thuộc tính boolean DOM disabled. Tất cả những gì đã nói, tôi không thực sự biết tại sao mã của bạn không hoạt động, nhưng làm cho nó dễ đọc và đơn giản chắc chắn sẽ giúp ích.

function checkChild(id) { 
    var input, checkBox, parts, inputs = $("input[id*=hdnParentMenuItemID]"); 
    for (var i = 0, len = inputs.length; i < len; i++) { 
     input = inputs[i]; 
     parts = input.value.split(':'); 
     if (parts[0] == id) { 
      checkBox = document.getElementById(parts[1]); 
      checkBox.disabled = !checkBox.disabled; 
     } 
    } 
}