Thêm thuộc tính bị vô hiệu hóa vào thành phần đầu vào bằng Javascript

Tôi có một hộp đầu vào và tôi muốn nó bị vô hiệu hóa và đồng thời ẩn nó để tránh các vấn đề khi chuyển biểu mẫu của tôi.

Cho đến nay tôi có đoạn mã sau để ẩn đầu vào của mình:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

Đây là đầu vào bị ẩn do kết quả:

<input class="longboxsmall" type="text" />

Làm thế nào tôi cũng có thể thêm thuộc tính bị vô hiệu hóa vào đầu vào?

$("input").attr("disabled", true); kể từ ... tôi không biết gì nữa.

Đó là tháng 12 năm 2013 và tôi thực sự không biết phải nói gì với bạn.

Đầu tiên là luôn luôn .attr(), sau đó là luôn luôn .prop(), vì vậy tôi quay lại đây để cập nhật câu trả lời và làm cho nó chính xác hơn.

Sau đó một năm, jQuery đã thay đổi suy nghĩ của họ một lần nữa và tôi thậm chí không muốn theo dõi điều này.

Câu chuyện dài, tính đến thời điểm hiện tại, đây là câu trả lời tốt nhất: "bạn có thể sử dụng cả hai ... nhưng nó phụ thuộc."

Thay vào đó, bạn nên đọc câu trả lời này: https://stackoverflow.com/a/5876747/257493

Và ghi chú phát hành của họ cho sự thay đổi đó được bao gồm ở đây:

Không nên sử dụng .attr () hay .prop () để nhận / cài đặt giá trị. Sử dụng phương thức .val () thay vào đó (mặc dù sử dụng .attr ("value", "somevalue") sẽ tiếp tục hoạt động, như đã làm trước 1.6).

Tóm tắt về cách sử dụng ưa thích

Phương thức .prop () nên được sử dụng cho các thuộc tính / thuộc tính boolean và cho các thuộc tính không tồn tại trong html (như window.location). Tất cả các thuộc tính khác (những thuộc tính bạn có thể thấy trong html) có thể và nên tiếp tục được thao tác với phương thức .attr ().

Hay nói cách khác:

".prop = công cụ phi tài liệu"

".attr" = công cụ tài liệu

... ...

Tất cả chúng ta có thể học một bài học ở đây về tính ổn định của API ...

Mã làm việc từ các nguồn của tôi:

THẾ GIỚI HTML

<select name="select_from" disabled>...</select>

THẾ GIỚI

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

Nếu bạn đang sử dụng jQuery thì có một vài cách khác nhau để đặt thuộc tính bị vô hiệu hóa.

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

Tất cả các bên trên là giải pháp hoàn toàn hợp lệ. Chọn một trong những phù hợp với nhu cầu của bạn tốt nhất.

Bạn có thể lấy phần tử DOM và đặt thuộc tính bị vô hiệu hóa trực tiếp.

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

hoặc nếu có nhiều hơn một, bạn có thể sử dụng each()để đặt tất cả chúng:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

Chỉ cần sử dụng attr()phương thức của jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

Vì câu hỏi là hỏi làm thế nào để làm điều này với JS Tôi đang cung cấp một triển khai JS vanilla.

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}