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


147

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

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

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

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

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

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

Ответы:


316

$("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 ...


3
+1 за то, что текст обновления был достаточно большим, чтобы я мог обращать внимание
Vael Victus 06

@VaelVictus Не так быстро. Сожалею, что они снова изменили его через год после того, как я разместил это ... и я забыл об этом ответе. Прочтите этот ответ: stackoverflow.com/a/5876747/257493
Incognito

1
Это различие между .prop и .attr между документами и недокументами бесконечно полезно, и я никогда раньше не видел контекста, сформулированного в такой сжатой форме. Очень признателен!
unrivaledcreations

55

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

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

2
В качестве примечания для людей, приходящих сюда из Google, прямо из jQuery :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method
Эренор Паз,

16

Если вы используете 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.eq(0)[0].disabled = true;? :-P
qwertynl 06

1
Да, для меня это слишком сложно, я не захожу так далеко, чтобы улучшить производительность.
iConnor 06

+1. Хотя это немного избыточно. Если вы собираетесь иметь дело с NodeList / массивом элементов, глупо выбирать их по такому индексу. Итерация или простой выбор только нужного вам элемента имеет больше смысла.

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

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


1
Спасибо за решение, не требующее jQuery.
Элиас Замария 08

12

Вы можете получить элемент 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';
          });
});

5

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

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

4
и удалить отключенное состояние с помощью.removeAttr('disabled');
ruhong

2

Поскольку вопрос заключался в том, как это сделать с 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";
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.