Javascript kullanarak giriş öğesine devre dışı bırakılmış öznitelik ekle

Bir giriş kutusu var ve ben devre dışı bırakılmasını istiyorum ve aynı zamanda formu taşıma sırasında sorunları önlemek için gizlemek istiyorum.

Şimdiye kadar girdimi gizlemek için aşağıdaki kod var:

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

Sonuç olarak gizlenen girdi:

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

Engelli niteliğini girdiye nasıl ekleyebilirim?

$("input").attr("disabled", true); itibariyle ... Artık bilmiyorum.

Aralık 2013 ve size ne söyleyeceğimi bilmiyorum.

Önce hep öyleydi .attr(), sonra hep öyleydi .prop(), bu yüzden buraya geldim cevabı güncelledim ve daha doğru hale getirdim.

Sonra bir yıl sonra jQuery tekrar fikirlerini değiştirdi ve bunu takip etmek bile istemiyorum.

Uzun lafın kısası, şu andan itibaren, bu en iyi cevap: "ikisini de kullanabilirsiniz ... ama duruma göre değişir."

Bunun yerine bu yanıtı okumalısınız: https://stackoverflow.com/a/5876747/257493

Ve bu değişiklik için sürüm notları buraya dahil edilmiştir:

Değeri almak / ayarlamak için .attr () veya .prop () kullanılmamalıdır. Bunun yerine .val () yöntemini kullanın (.attr ("değer", "somevalue" kullanılmasına rağmen 1.6'dan önce olduğu gibi)

Tercih Edilen Kullanım Özeti

.Prop () yöntemi, boolean öznitelikleri / özellikleri ve html'de bulunmayan özellikler (window.location gibi) için kullanılmalıdır. Diğer tüm öznitelikler (html'de görebileceğiniz özellikler) .attr () yöntemiyle değiştirilmeye devam edilebilir ve değiştirilmeye devam edilmelidir.

Başka bir deyişle:

".prop = doküman olmayan şeyler"

".attr" = belge öğeleri

... ...

Hepimiz burada API kararlılığı hakkında bir ders öğrenelim ...

Kaynaklarımdan çalışma kodu:

HTML DÜNYASI

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

JQuery kullanıyorsanız, devre dışı bırakılmış özniteliği ayarlamanın birkaç farklı yolu vardır.

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

Yukarıdakilerin hepsi mükemmel şekilde geçerli çözümlerdir. İhtiyaçlarınıza en uygun olanı seçin.

DOM öğesini alabilir ve devre dışı bırakılan özelliği doğrudan ayarlayabilirsiniz.

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

veya birden fazla varsa each()hepsini ayarlamak için kullanabilirsiniz :

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

Sadece jQuery attr()yöntemini kullanın

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

Soru JS ile nasıl yapılacağını sorduğumdan beri bir vanilya JS uygulaması sağlıyorum.

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