เพิ่มแอททริบิวต์ที่ถูกปิดใช้งานในองค์ประกอบอินพุตโดยใช้ Javascript

ฉันมีกล่องอินพุตและฉันต้องการให้ปิดการใช้งานและในขณะเดียวกันก็ซ่อนไว้เพื่อหลีกเลี่ยงปัญหาเมื่อทำการย้ายแบบฟอร์มของฉัน

จนถึงตอนนี้ฉันมีรหัสต่อไปนี้เพื่อซ่อนอินพุตของฉัน:

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

นี่คืออินพุตที่ถูกซ่อนไว้เป็นผลลัพธ์:

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

ฉันจะเพิ่มแอททริบิวต์ที่ปิดใช้งานให้กับอินพุตได้อย่างไร

$("input").attr("disabled", true); ณ ... ฉันไม่รู้อะไรอีกแล้ว

เป็นเดือนธันวาคม 2556 และฉันไม่รู้จะบอกอะไรคุณ

ก่อนอื่นมันก็เป็นแบบ.attr()นั้นเสมอ.prop()ดังนั้นฉันกลับมาที่นี่เพื่อปรับปรุงคำตอบและทำให้มันแม่นยำยิ่งขึ้น

จากนั้นอีกหนึ่งปีให้หลัง jQuery เปลี่ยนใจพวกเขาอีกครั้งและฉันไม่ต้องการแม้แต่จะติดตามเรื่องนี้

เรื่องสั้นสั้น ๆ ณ ตอนนี้นี่เป็นคำตอบที่ดีที่สุด: "คุณสามารถใช้ทั้ง ... แต่มันขึ้นอยู่กับ"

คุณควรอ่านคำตอบนี้แทน: https://stackoverflow.com/a/5876747/257493

และบันทึกประจำรุ่นสำหรับการเปลี่ยนแปลงนั้นรวมอยู่ที่นี่:

ไม่ควรใช้ .attr () หรือ. prop () สำหรับการรับ / การตั้งค่า ใช้เมธอด .val () แทน (แม้ว่าจะใช้. atr ("value", "somevalue") จะทำงานต่อไปได้เหมือนเดิมก่อน 1.6)

สรุปการใช้งานที่ต้องการ

ควรใช้เมธอด .prop () สำหรับคุณสมบัติ / คุณสมบัติบูลีนและสำหรับคุณสมบัติที่ไม่มีอยู่ใน html (เช่น window.location) แอตทริบิวต์อื่น ๆ ทั้งหมด (สิ่งที่คุณเห็นใน html) สามารถและควรได้รับการจัดการด้วยวิธีการ. attr ()

หรือในคำอื่น ๆ :

".prop = สิ่งที่ไม่ใช่เอกสาร"

".attr" = รายการเอกสาร

... ...

ขอให้เราทุกคนเรียนรู้บทเรียนที่นี่เกี่ยวกับความเสถียรของ API ...

รหัสการทำงานจากแหล่งที่มาของฉัน:

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

หากคุณใช้ 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";
}