Câu hỏi Vô hiệu / kích hoạt mộ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 một đầu vào bị vô hiệu hóa?


1913
2017-09-12 05:21


gốc


có thể trùng lặp Xóa thuộc tính bị vô hiệu hóa bằng JQuery? - user2381114
Tôi tìm thấy Phụ thuộc plugin mà bạn có thể thấy hữu ích - Ben


Các câu trả lời:


jQuery 1.6+

Để thay đổi disabled tà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() tương tự:

Đặt thuộc tính đã tắt.

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

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

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

Trong bất kỳ phiên bản nào của jQuery

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

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

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


Chú thích: Trong 1,6 có một .removeProp() phương pháp nghe rất giống removeAttr(), Nhưng nó NÊN KHÔNG ĐƯỢC 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 để loại bỏ các thuộc tính gốc như đã chọn, bị vô hiệu hóa hoặc được chọn. Thao tác này sẽ xóa hoàn toàn thuộc tính và sau khi xóa, không thể thêm lại thành phần tử. Sử dụng .prop () để đặt các thuộc tính này thành false thay thế.

Trong 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 sai thay vì "loại bỏ" chúng như các đối tác "thuộc tính" của chúng trong 1,5


3293
2017-09-12 05:23



Ngoài ra, hãy nhớ rằng, nếu bạn muốn vô hiệu hóa TẤT CẢ các điều khiển đầu vào của biểu mẫu - hãy bao gồm. hộp kiểm, radio, textareas, v.v. - bạn phải chọn ':input', không chỉ 'input'. Cái sau chỉ chọn các phần tử <input> thực tế. - Cornel Masson
@CornelMasson input,textarea,select,button tốt hơn một chút để sử dụng hơn :input - - :input như một bộ chọn là khá kém hiệu quả vì nó phải chọn * sau đó lặp qua từng phần tử và lọc theo tên thẻ - nếu bạn chuyển 4 bộ chọn tên thẻ trực tiếp, nó sẽ nhanh hơn. Cũng thế, :input không phải là bộ chọn CSS chuẩn, vì vậy mọi lợi ích về hiệu suất có thể đạt được từ querySelectorAll bị mất - gnarf
Điều này chỉ ngăn người dùng truy cập vào nó hay thực sự xóa nó khỏi yêu cầu web? - OneChillDude
Sử dụng .removeProp("disabled") đã gây ra vấn đề "thuộc tính bị xóa hoàn toàn và không được thêm lại" như được chỉ ra bởi @ThomasDavidBaker, trong trường hợp một số trình duyệt như Chrome, trong khi nó hoạt động tốt trên một số trình duyệt như Firefox. Chúng ta nên thực sự cẩn thận ở đây. Luôn luôn sử dụng .prop("disabled",false) thay thế - Sandeepan Nath
Không .prop hoặc .attr là đủ để vô hiệu hóa các phần tử neo; .prop thậm chí không có màu xám trong 'control' (.attr hiện, nhưng href vẫn hoạt động). Bạn cũng phải thêm một trình xử lý sự kiện nhấn gọi các defaultDefault (). - Jeff Lowery


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

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

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

51
2017-07-18 11:51



Jikes! Tại sao $(document).on('event_name', '#your_id', function() {...}) thay vì $('#your_id').on('event_name', function() {...}). Như được mô tả trong Tài liệu jQuery .on () trước đây sử dụng phái đoàn và lắng nghe tất cả các  event_name các sự kiện bong bóng đến document và kiểm tra chúng cho phù hợp #your_id. Sau này lắng nghe cụ thể $('#your_id') chỉ sự kiện và quy mô tốt hơn. - Peter V. Mørch
Các công trình trước đây cho các phần tử được chèn vào DOM tại bất kỳ thời điểm nào, sau này chỉ dành cho các phần tử còn tồn tại tại thời điểm đó. - crazymykl
@crazymykl Đúng nhưng bạn không nên thêm các phần tử có id đã có trên trang của mình. - SepehrM


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

Đôi khi bạn cần tắt / bật phần tử biểu mẫu như đầu vào hoặc văn bản. Jquery giúp bạn dễ dàng thực hiện việc này bằng cách thiết lập thuộc tính disabled thành "disabled". 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 "đã tắt" khỏi phần tử này hoặc xóa chuỗi của nó. 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


25
2018-04-07 10:27





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

hoặc là

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

12
2017-09-06 14:53



Tất nhiên câu hỏi được hỏi cho jQuery và điều này đang thay đổi trạng thái bằng JavaScript đơn giản, nhưng nó hoạt động. - basic6
Điều này thay đổi trạng thái trong JavaScript, nhưng nó vẫn sử dụng một bộ chọn jQuery để lấy đầu vào đầu tiên. - cjsimon
Nhưng tôi không nghĩ rằng chúng tôi đang làm cho bách khoa toàn thư của jquery ở đây, nếu một câu trả lời hoạt động, nó tốt - Sajjad Shirazy
Đây là một câu trả lời tốt, cảm ơn bạn. - Ali Karaca


Bạn có thể đặt điều này ở đâu đó 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();

7
2017-10-18 13:42



Trong khi gói các chức năng là tiện dụng, bạn nên đã sử dụng prop và không phải  attr với disabled tài sản cho nó hoạt động chính xác (giả sử jQuery 1.6 hoặc cao hơn). - Gone Coding
@TrueBlueAussie Nhược điểm của việc sử dụng là gì attr? Tôi sử dụng mã trên trong một số dự án và theo như tôi nhớ nó hoạt động ok - Nicolae Surdu
Các ngoại lệ rõ ràng là điều khiển với các thuộc tính đằng sau hậu trường. Người nổi tiếng nhất là checked thuộc tính của hộp kiểm. Sử dụng attr sẽ không cho kết quả tương tự. - Gone Coding
Điều này "$ (". MyInputs "). Enable ();" không làm việc cho tôi, nhưng "$ (el) .removeAttr ('disabled');" hoạt động rất tốt, cảm ơn - CrsCaballero


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') );

4
2017-09-12 16:28





Cập nhật cho năm 2018:

Bây giờ không cần jQuery và đã lâu rồi document.querySelector  hoặc là 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 giống như $, cộng với những công việc 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 phần tử

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

2
2018-02-11 18:29



câu hỏi cụ thể hỏi về jQuery ... nhưng cũng bằng nhau câu lệnh của bạn là chính xác, và đáng biết rằng jQuery không nhu cầu được sử dụng cho điều này khi có nhiều yếu tố nữa. - ADyson


Bạn có thể sử dụng phương thức jQuery 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>

2
2017-08-02 10:26



Cuộc sống tiết kiệm ... nhờ @ SPARTAN - wild coder


Có một số cách sử dụng chúng, bạn có thể bật / tắt bất kỳ phần tử nào :

Phương pháp 1

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

Phương pháp 2

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

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

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

Nếu bạn muốn kích hoạt bất kỳ phần tử nào thì bạn chỉ cần làm ngược lại với những gì bạn đã làm để làm cho nó vô hiệu hóa. 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.

Phương pháp 1

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

Phương pháp 2

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

Phương pháp 3

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

Một lần nữa, nếu bạn đang sử dụng phiên bản jQuery 1.7 hoặc cao hơn thì sử dụng lệnh 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ỳ phần tử nào bằng cách sử dụng jQuery.


1
2017-08-02 10:59





Tôi đã sử dụng câu trả lời @gnarf và thêm nó làm chức năng

   $.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);

0
2017-11-16 10:24





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 input với id="my-input"

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

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


0
2018-06-04 13:43