Dodaj atrybut disabled do elementu wejściowego za pomocą JavaScript

Mam pole wprowadzania i chcę, aby było wyłączone, a jednocześnie ukryte, aby uniknąć problemów podczas przenoszenia formularza.

Do tej pory mam następujący kod, aby ukryć moje dane wejściowe:

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

Oto dane wejściowe, które zostaną ukryte w wyniku:

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

Jak mogę również dodać atrybut disabled do danych wejściowych?

$("input").attr("disabled", true); od ... już nie wiem.

Jest grudzień 2013 roku i naprawdę nie mam pojęcia, co powiedzieć.

Najpierw zawsze .attr(), potem zawsze .prop(), więc wróciłem tutaj, zaktualizowałem odpowiedź i uściśliłem ją.

Rok później jQuery ponownie zmieniło zdanie i nawet nie chcę tego śledzić.

Krótko mówiąc, w tej chwili jest to najlepsza odpowiedź: „możesz używać obu ... ale to zależy”.

Zamiast tego powinieneś przeczytać tę odpowiedź: https://stackoverflow.com/a/5876747/257493

A ich informacje o wydaniu dotyczące tej zmiany są zawarte tutaj:

Ani .attr (), ani .prop () nie powinny być używane do pobierania / ustawiania wartości. Zamiast tego użyj metody .val () (chociaż użycie .attr ("value", "somevalue") będzie nadal działać, tak jak przed 1.6).

Podsumowanie preferowanego wykorzystania

Metoda .prop () powinna być używana dla atrybutów / właściwości logicznych oraz dla właściwości, które nie istnieją w html (np. Window.location). Wszystkie inne atrybuty (te, które można zobaczyć w html) mogą i powinny być nadal modyfikowane za pomocą metody .attr ().

Innymi słowy:

„.prop = treści nie będące dokumentami”

„.attr” = dokument

... ...

Obyśmy wszyscy nauczyli się lekcji o stabilności API ...

Działający kod z moich źródeł:

HTML WORLD

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

JS WORLD

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

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



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

Jeśli używasz jQuery, istnieje kilka różnych sposobów ustawienia wyłączonego atrybutu.

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

Wszystkie powyższe rozwiązania są całkowicie poprawnymi rozwiązaniami. Wybierz ten, który najlepiej odpowiada Twoim potrzebom.

Możesz pobrać element DOM i bezpośrednio ustawić wyłączoną właściwość.

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

lub jeśli jest więcej niż jeden, możesz użyć, each()aby ustawić je wszystkie:

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

Po prostu użyj attr()metody jQuery

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

Ponieważ pytanie dotyczyło tego, jak to zrobić z JS, zapewniam implementację wanilii 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";
}