Додайте відключений атрибут до вхідного елемента за допомогою Javascript

У мене є поле введення, і я хочу, щоб його було відключено, і в той же час приховати його, щоб уникнути проблем при перенесенні моєї форми.

Поки що у мене є такий код, щоб приховати свій вклад:

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

Це вхід, який приховується в результаті:

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

Як я можу також додати вхідний атрибут?

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

СВ СВІТ

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

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



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

Якщо ви використовуєте jQuery, то є кілька різних способів встановити атрибут вимкнено.

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 та встановити властивість вимкнено безпосередньо.

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