วิธีเพิ่มแอตทริบิวต์“ อ่านอย่างเดียว” ให้กับ <input>

301

ฉันreadonlyจะเพิ่มลงในเฉพาะได้<input>อย่างไร .attr('readonly')ไม่ทำงาน, ไม่เป็นผล.

javascript jquery

— เฉียว
แหล่งที่มา

2

.attr ('อ่านอย่างเดียว' จริง) ใช้งานได้อย่าอื่น ๆ

— Qiao

3

.attr ('readonly', 'readonly') ยังใช้ได้

— Qiao

3

ขึ้นอยู่กับว่าคุณใช้ DOCTYPE ใด สำหรับ HTML 4.01 DTD คำตอบจาก CMS นั้นใช้งานได้และ HTML 4.01 ที่ถูกต้อง หากคุณใช้ XHTML DTD คำตอบจาก ceejayoz นั้นใช้ได้และ XHTML ที่ถูกต้อง

— bjoernwibben

2

มันไม่ได้ขึ้นอยู่กับ Doctype แต่ DOM ก็เหมือนกันไม่ว่าจะเป็นการอ่านผ่าน HTML หรือ XML และในกรณีใด ๆ XHTML ยังคงทำหน้าที่เป็น HTML ไม่ใช่ XML สำหรับความเข้ากันได้ของ IE

— bobince

545

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

อ่านเพิ่มเติมเกี่ยวกับความแตกต่างระหว่าง prop และ attr

— CMS
แหล่งที่มา

1

คุณแน่ใจไหม? ฉันคิดเช่นกัน แต่ไม่สามารถหาอะไรได้ในสเป็ค <input name = "foo" readonly = "readonly" value = "bar" /> ตรวจสอบความสมบูรณ์แบบที่ validator.w3.org ด้วย xhtml 1.0 ที่เข้มงวด

— Jonas Stensved

17

โพสต์นี้ควรเปลี่ยนเป็น. prop () แทนที่จะเป็น. atr () ตามที่ระบุไว้ใน jQuery API: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

แอตทริบิวต์อ่านอย่างเดียวคือ "แอตทริบิวต์บูลีน" - whatwg.org/specs/web-apps/current-work/#boolean-attribute แม้จะมีชื่อที่ทำให้เข้าใจผิดค่าไม่ควรเป็น "จริง" หรือ "เท็จ" ในขณะที่ฉันคิดว่าโค้ดด้านบนจะใช้งานได้จริง (ทดสอบใน Chrome ด้วย jQuery 1.8.1) แต่อาจนำไปสู่ความสับสนในภายหลังสำหรับผู้ที่ไม่มีประสบการณ์ นอกจากนี้ตาม jQuery docs ค่าควรเป็นตัวเลขหรือสตริงไม่ใช่บูลีน api.jquery.com/attr/#attr2

— ลุค

151

ใช้$ .prop ()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);

— เกร็ก
แหล่งที่มา

8

หลังจากอ่าน jQuery API สำหรับ .prop ควรเป็นคำตอบที่ยอมรับได้ ฉันเคยทำ. atr ('readonly', 'readonly') และ .removeAttr ('readonly') ในอดีต แต่สิ่งนี้ดูเหมือนจะถูกต้องมากขึ้นและทำให้โค้ดสะอาดขึ้นเช่นกัน

— evan w

4

ทุกคนควรใช้คำตอบนี้ตามที่ระบุไว้ที่นี่: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

4

คำเตือนด้วยการใช้$.prop(): Prop จะตั้งค่าแอตทริบิวต์แบบอ่านอย่างเดียวเป็นสตริงว่าง / ว่างดังนั้นหากคุณมี CSS ใด ๆ ที่ใช้ตัวเลือกคุณลักษณะสำหรับ[readonly="readonly"]คุณจะต้องเปลี่ยนเป็น[readonly](หรือรวมทั้งสองอย่างนี้)

— ลุค

28

อ่านอย่างเดียวเป็นคุณลักษณะตามที่กำหนดไว้ใน html ดังนั้นให้ปฏิบัติเหมือนหนึ่ง

คุณต้องมีสิ่งที่อ่านได้อย่างเดียว = "อ่านอย่างเดียว" ในวัตถุที่คุณกำลังทำงานด้วยหากคุณไม่ต้องการให้แก้ไขได้ และหากคุณต้องการให้แก้ไขได้อีกครั้งคุณจะไม่มีสิ่งที่อ่านได้อย่างเดียว = '' (นี่ไม่ใช่มาตรฐานถ้าฉันเข้าใจถูกต้อง) คุณต้องลบแอตทริบิวต์ทั้งหมด

เช่นนี้ในขณะที่ใช้ jQuery เพิ่มและลบมันเป็นสิ่งที่เหมาะสม

ตั้งค่าแบบอ่านอย่างเดียว:

$("#someId").attr('readonly', 'readonly');

ลบแบบอ่านอย่างเดียว:

$("#someId").removeAttr('readonly');

นี่เป็นทางเลือกเดียวที่เหมาะกับฉันจริงๆ หวังว่ามันจะช่วย!

20

.attr('readonly', 'readonly')ควรทำเคล็ดลับ .attr('readonly')ส่งกลับค่าของคุณเท่านั้นมันไม่ได้ตั้งค่า

— ceejayoz
แหล่งที่มา

16

jQuery's attr () ใช้งานได้กับคุณสมบัติ JavaScript ไม่ใช่คุณสมบัติ HTML แม้ว่าชื่อจะมีความหมายเป็นอย่างอื่น attr ('readonly') ใช้งานได้จริงในคุณสมบัติ DOM ระดับ 1 HTML readOnly ซึ่งเป็นบูลีนดังนั้น 'true' จึงเหมาะสมกว่า อย่างไรก็ตามสตริง 'อ่านได้อย่างเดียว' ยังเป็นค่าจริงเมื่อแปลงเป็นบูลีนโดยอัตโนมัติดังนั้นข้อมูลด้านบนยังคงใช้งานได้

— bobince

ฉันไม่คิดว่าคุณต้องการตั้งค่าคุณลักษณะเป็น 'จริง' .attrค่าควรจะเป็นสตริงหรือจำนวนไม่บูลีนตามเอกสาร jQuery นี้: api.jquery.com/attr/#attr2นอกจากนี้ HTML "แอตทริบิวต์แบบบูล" ควรจะเป็นสตริงที่ว่างเปล่าหรือมูลค่าของแอตทริบิวต์ ฉันคิดว่าทางออกคือการใช้.prop()เพื่อหลีกเลี่ยงความสับสน

— ลุค

16

ฉันคิดว่า "ปิดการใช้งาน" ไม่รวมอินพุตจากการส่งบน POST

4

ใช่แล้ว. ฉันพบกระทู้นี้ในขณะที่ค้นหาทางเลือกในการ "ปิดการใช้งาน" เพียงด้วยเหตุผลนี้

— Jonas Stensved

แต่คุณสามารถเปิดใช้งานได้ก่อนที่จะส่งและปิดการใช้งานในภายหลัง $ (เอกสาร) .on ('ส่ง', "#myform", ฟังก์ชั่น (e) {// เปิดใช้งานอินพุตกลับคืนจริง; // ปิดการใช้งานอีกครั้ง ต้องการ} มันใช้งานได้ฉันทดสอบแล้ว

— Geomorillo

การอ่านค่าอินพุตเท่านั้นใน html ได้รับอนุญาตให้ส่งบน POST โดยไม่ใช้ซ่อนหรือไม่

— Ajay Takur

12

คุณสามารถปิดการใช้งานแบบอ่านอย่างเดียวโดยใช้ .removeAttr

$('#descrip').removeAttr('readonly');

— สตีฟ
แหล่งที่มา

5

สำหรับการเปิดใช้งานแบบอ่านอย่างเดียว:

$("#descrip").attr("readonly","true");

สำหรับการปิดการใช้งานแบบอ่านอย่างเดียว

$("#descrip").attr("readonly","");

— Pradeep
แหล่งที่มา

จากapi.jquery.com/attr "ตั้งแต่ jQuery 1.6, .attr () วิธีการส่งกลับไม่ได้กำหนดสำหรับคุณลักษณะที่ยังไม่ได้ตั้งค่าในการดึงและเปลี่ยนคุณสมบัติ DOM เช่นสถานะการตรวจสอบเลือกหรือปิดการใช้งานขององค์ประกอบแบบฟอร์ม ใช้วิธี. prop () "

— David Clarke

1

ไม่ควรตั้งค่าแอตทริบิวต์เป็นสตริง "true" สิ่งนี้อาจใช้งานได้ แต่ไม่ถูกต้องทางเทคนิค (ดูความคิดเห็นก่อนหน้าของฉันด้านบน)

— ลุค

อย่าใช้คำแนะนำนี้มีคำแนะนำที่ดีกว่านี้มาก "true" ไม่ถูกต้องสำหรับการตั้งค่าและการลบก็ไม่ถูกต้องเช่นกัน

— MiFiHiBye

4

ใช้คุณสมบัติ setAttribute โปรดทราบว่าในตัวอย่างที่เลือก 1 จะใช้แอตทริบิวต์อ่านได้อย่างเดียวในกล่องข้อความมิฉะนั้นให้ลบแอตทริบิวต์แบบอ่านอย่างเดียว

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

— Diogo Rodrigues
แหล่งที่มา

-4

สำหรับ jQuery เวอร์ชัน <1.9:

$('#inputId').attr('disabled', true);

สำหรับรุ่น jQuery> = 1.9:

$('#inputId').prop('disabled', true);

— Osman Adak
แหล่งที่มา