Làm cách nào để loại bỏ thuộc tính bị vô hiệu hóa bằng cách sử dụng jQuery?

Tôi phải vô hiệu hóa đầu vào lúc đầu và sau đó nhấp vào liên kết để kích hoạt chúng.

Đây là những gì tôi đã cố gắng cho đến nay, nhưng nó không hoạt động.

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').removeAttr("disabled")
});

Điều này cho tôi thấy truevà sau đó falsenhưng không có gì thay đổi cho các đầu vào:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});

Luôn sử dụng prop()phương thức để bật hoặc tắt các thành phần khi sử dụng jQuery (xem bên dưới để biết lý do).

Trong trường hợp của bạn, nó sẽ là:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

ví dụ jsFiddle ở đây.

Tại sao sử dụng prop()khi bạn có thể sử dụng attr()/ removeAttr()để làm điều này?

Về cơ bản, prop()nên được sử dụng khi nhận hoặc thiết lập các thuộc tính (ví dụ như autoplay, checked, disabledvà requiredgiữa những người khác).

Bằng cách sử dụng removeAttr(), bạn đang loại bỏ hoàn toàn disabledchính thuộc tính - trong khi prop()chỉ đơn thuần là đặt giá trị boolean bên dưới của thuộc tính thành false.

Mặc dù những gì bạn muốn làm có thể được thực hiện bằng cách sử dụng attr()/ removeAttr(), nhưng điều đó không có nghĩa là nó nên được thực hiện (và có thể gây ra hành vi lạ / có vấn đề, như trong trường hợp này).

Các trích xuất sau (lấy từ tài liệu jQuery cho prop () ) giải thích các điểm này chi tiết hơn:

"Sự khác biệt giữa các thuộc tính và thuộc tính có thể quan trọng trong các tình huống cụ thể. Trước khi jQuery 1.6, .attr()phương thức đôi khi tính đến các giá trị thuộc tính khi truy xuất một số thuộc tính, có thể gây ra hành vi không nhất quán. Đối với jQuery 1.6, .prop() phương thức cung cấp một cách để truy xuất rõ ràng giá trị .attr()thuộc tính , trong khi lấy các thuộc tính. "

"Các thuộc tính thường ảnh hưởng đến trạng thái động của thành phần DOM mà không thay đổi thuộc tính HTML được tuần tự hóa. Ví dụ bao gồm thuộc value tính của các thành phần đầu vào, thuộc disabledtính của đầu vào và nút hoặc thuộc checkedtính của hộp kiểm. .prop()Phương thức này nên được sử dụng để đặt disabledvà checkedthay vì các .attr() phương pháp. các .val()phương pháp nên được sử dụng để nhận và thiết lập value".

<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

để loại bỏ việc sử dụng thuộc tính bị vô hiệu hóa,

 $("#elementID").removeAttr('disabled');

và để thêm sử dụng thuộc tính bị vô hiệu hóa,

$("#elementID").prop("disabled", true);

Thưởng thức :)

Sử dụng như thế này,

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });

Tôi nghĩ rằng bạn đang cố gắng chuyển trạng thái bị vô hiệu hóa, trong trường hợp phù thủy, bạn nên sử dụng điều này (từ câu hỏi này ):

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

Đây là một fiddle làm việc.

Nghĩ rằng bạn có thể dễ dàng thiết lập

$(function(){
$("input[name^=radio_share]").click
(
    function()
    {
        if($(this).attr("id")=="radio_share_dependent")
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);   
        }
        else
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);   
        }
    }
 );
});

Đây là mã duy nhất làm việc cho tôi:

element.removeProp('disabled')

Lưu ý rằng nó removePropvà không removeAttr.

Tôi đang sử dụng jQuery 2.1.3ở đây.

2018, không có JQuery

Tôi biết câu hỏi là về JQuery: câu trả lời này chỉ là FYI.

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 

Câu hỏi này đặc biệt đề cập đến jQuery, nhưng nếu bạn đang tìm cách thực hiện điều này mà không cần jQuery, thì tương đương trong JavaScript vanilla là:

elem.removeAttribute('disabled');