Добавить отключенный атрибут к элементу ввода с помощью Javascript

У меня есть поле ввода, и я хочу, чтобы оно было отключено и в то же время скрыло его, чтобы избежать проблем при переносе моей формы.

Пока что у меня есть следующий код, чтобы скрыть ввод:

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

Это ввод, который в результате скрывается:

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

Как я могу добавить к входу атрибут disabled?

$("input").attr("disabled", true); по состоянию на ... я больше не знаю.

Сейчас декабрь 2013 года, и я действительно понятия не имею, что вам сказать.

Сначала было всегда .attr(), потом было всегда .prop(), поэтому я вернулся сюда, обновил ответ и сделал его более точным.

Затем, год спустя, jQuery снова передумали, и я даже не хочу отслеживать это.

Короче говоря, на данный момент это лучший ответ: «вы можете использовать оба ... но это зависит от обстоятельств».

Вместо этого вам следует прочитать этот ответ: https://stackoverflow.com/a/5876747/257493

И их примечания к выпуску для этого изменения включены здесь:

Ни .attr (), ни .prop () не должны использоваться для получения / установки значения. Вместо этого используйте метод .val () (хотя использование .attr ("значение", "некоторое значение") будет продолжать работать, как это было до 1.6).

Резюме предпочтительного использования

Метод .prop () следует использовать для логических атрибутов / свойств и для свойств, которые не существуют в html (например, window.location). Все остальные атрибуты (те, которые вы видите в html) можно и нужно продолжать манипулировать с помощью метода .attr ().

Или другими словами:

".prop = не документ"

".attr" = материал документа

... ...

Пусть мы все извлечем здесь урок о стабильности API ...

Рабочий код из моих исходников:

HTML МИР

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

JS МИР

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

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



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

Если вы используете jQuery, есть несколько разных способов установить атрибут disabled.

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

Все вышеперечисленное - вполне допустимые решения. Выберите тот, который лучше всего соответствует вашим потребностям.

Вы можете получить элемент DOM и напрямую установить свойство disabled.

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

или, если их несколько, вы можете использовать each()для их всех:

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

Просто используйте attr()метод jQuery

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

Поскольку вопрос заключался в том, как это сделать с JS, я предлагаю ванильную реализацию JS.

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";
}