Vô hiệu hóa / kích hoạt đầu vào với jQuery?

$input.disabled = true;

hoặc là

$input.disabled = "disabled";

Đó là cách tiêu chuẩn? Và ngược lại, làm thế nào để bạn kích hoạt đầu vào bị vô hiệu hóa?

jQuery 1.6+

Để thay đổi disabledtài sản bạn nên sử dụng .prop()chức năng.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 trở xuống

Các .prop()chức năng không tồn tại, nhưng .attr()không tương tự:

Đặt thuộc tính bị vô hiệu hóa.

$("input").attr('disabled','disabled');

Để kích hoạt lại, phương pháp thích hợp là sử dụng .removeAttr()

$("input").removeAttr('disabled');

Trong mọi phiên bản của jQuery

Bạn luôn có thể dựa vào đối tượng DOM thực tế và có thể nhanh hơn một chút so với hai tùy chọn còn lại nếu bạn chỉ xử lý một yếu tố:

// assuming an event handler thus 'this'
this.disabled = true;

Lợi thế của việc sử dụng .prop()hoặc .attr()phương thức là bạn có thể đặt thuộc tính cho một loạt các mục đã chọn.

Lưu ý: Trong 1.6 có một .removeProp()phương thức nghe rất giống removeAttr(), nhưng nó KHÔNG NÊN SỬ DỤNG trên các thuộc tính gốc như 'disabled' Trích từ tài liệu:

Lưu ý: Không sử dụng phương pháp này để xóa các thuộc tính gốc như đã chọn, bị vô hiệu hóa hoặc được chọn. Điều này sẽ loại bỏ hoàn toàn thuộc tính và sau khi xóa, không thể thêm lại vào phần tử. Sử dụng .prop () để đặt các thuộc tính này thành false thay thế.

Trên thực tế, tôi nghi ngờ có nhiều cách sử dụng hợp pháp cho phương pháp này, các đạo cụ boolean được thực hiện theo cách mà bạn nên đặt chúng thành false thay vì "loại bỏ" chúng giống như "thuộc tính" của chúng trong 1,5

Chỉ vì lợi ích của các quy ước mới && làm cho nó có thể thích ứng trong tương lai (trừ khi mọi thứ thay đổi mạnh mẽ với ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

và

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Đôi khi bạn cần phải tắt / bật phần tử biểu mẫu như đầu vào hoặc textarea. Jquery giúp bạn dễ dàng thực hiện điều này với việc đặt thuộc tính bị vô hiệu thành "bị vô hiệu hóa". Ví dụ:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Để bật phần tử bị vô hiệu hóa, bạn cần xóa thuộc tính "bị vô hiệu hóa" khỏi phần tử này hoặc làm trống chuỗi đó. Ví dụ:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

tham khảo: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

$("input")[0].disabled = true;

hoặc là

$("input")[0].disabled = false;

Bạn có thể đặt cái này ở đâu đó trên toàn cầu trong mã của bạn:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Và sau đó bạn có thể viết những thứ như:

$(".myInputs").enable();
$("#otherInput").disable();

Nếu bạn chỉ muốn đảo ngược trạng thái hiện tại (như hành vi nút chuyển đổi):

$("input").prop('disabled', ! $("input").prop('disabled') );

Có nhiều cách sử dụng chúng, bạn có thể bật / tắt bất kỳ yếu tố nào :

Cách tiếp cận 1

$("#txtName").attr("disabled", true);

Cách tiếp cận 2

$("#txtName").attr("disabled", "disabled");

Nếu bạn đang sử dụng jQuery 1.7 hoặc phiên bản cao hơn thì hãy sử dụng prop (), thay vì attr ().

$("#txtName").prop("disabled", "disabled");

Nếu bạn muốn kích hoạt bất kỳ yếu tố nào thì bạn chỉ cần làm ngược lại với những gì bạn đã làm để vô hiệu hóa nó. Tuy nhiên jQuery cung cấp một cách khác để loại bỏ bất kỳ thuộc tính nào.

Cách tiếp cận 1

$("#txtName").attr("disabled", false);

Cách tiếp cận 2

$("#txtName").attr("disabled", "");

Cách tiếp cận 3

$("#txtName").removeAttr("disabled");

Một lần nữa, nếu bạn đang sử dụng jQuery 1.7 hoặc phiên bản cao hơn thì hãy sử dụng prop (), thay vì attr (). Đó là. Đây là cách bạn kích hoạt hoặc vô hiệu hóa bất kỳ yếu tố nào bằng jQuery.

Cập nhật năm 2018:

Bây giờ không cần jQuery và đã lâu rồi document.querySelector hoặc document.querySelectorAll(đối với nhiều phần tử) thực hiện gần như chính xác công việc tương tự như $, cộng với các phần tử rõ ràng hơn getElementById,, getElementsByClassName.getElementsByTagName

Vô hiệu hóa một trường của lớp "hộp kiểm đầu vào"

document.querySelector('.input-checkbox').disabled = true;

hoặc nhiều yếu tố

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

Bạn có thể sử dụng phương thức prop prop () để vô hiệu hóa hoặc kích hoạt phần tử biểu mẫu hoặc điều khiển động bằng cách sử dụng jQuery. Phương thức prop () yêu cầu jQuery 1.6 trở lên.

Thí dụ:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

Vô hiệu hóa:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Cho phép:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Vô hiệu hóa đúng cho loại đầu vào:

Trong trường hợp có loại đầu vào cụ thể ( Ví dụ: Kiểu nhập văn bản )

$("input[type=text]").attr('disabled', true);

Đối với tất cả các loại đầu vào

$("input").attr('disabled', true);

cái này hiệu quả với tôi

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

Tôi đã sử dụng câu trả lời @gnarf và thêm nó dưới dạng hàm

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Sau đó sử dụng như thế này

$('#myElement').disable(true);

2018, không có JQuery (ES6)

Vô hiệu hóa tất cả input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Vô hiệu hóa inputvớiid="my-input"

document.getElementById('my-input').disabled = true;

Câu hỏi là với JQuery, đó chỉ là FYI.

Cách tiếp cận 4 (đây là phần mở rộng của câu trả lời coder hoang dã )

txtName.disabled=1     // 0 for enable

<input id="txtName">

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

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

 $( "#id" ).prop( "disabled", false );

<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

Trong jQuery Mobile:

Để vô hiệu hóa

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

Để kích hoạt

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');