ฉันมีอินพุตต่อไปนี้:
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>ฉันจะใช้ jQuery เพื่อทำให้องค์ประกอบนี้เป็นอินพุตแบบอ่านอย่างเดียวโดยไม่เปลี่ยนองค์ประกอบหรือค่าได้อย่างไร
ฉันมีอินพุตต่อไปนี้:
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>ฉันจะใช้ jQuery เพื่อทำให้องค์ประกอบนี้เป็นอินพุตแบบอ่านอย่างเดียวโดยไม่เปลี่ยนองค์ประกอบหรือค่าได้อย่างไร
คำตอบ:
วันนี้ด้วย jQuery 1.6.1 หรือสูงกว่าขอแนะนำให้ใช้. prop () เมื่อตั้งค่าคุณสมบัติ / คุณสมบัติบูลีน
$("#fieldName").prop("readonly", true);เพียงเพิ่มคุณสมบัติต่อไปนี้
// for disabled i.e. cannot highlight value or change
disabled="disabled"
// for readonly i.e. can highlight value but not change
readonly="readonly"
jQuery เพื่อให้การเปลี่ยนแปลงไปยังองค์ประกอบ (แทนdisabledสำหรับreadonlyในต่อไปสำหรับการตั้งค่าreadonlyแอตทริบิวต์)
$('#fieldName').attr("disabled","disabled") หรือ
$('#fieldName').attr("disabled", true) หมายเหตุ: ในฐานะของ jQuery 1.6 ก็จะแนะนำให้ใช้แทน.prop() .attr()รหัสดังกล่าวจะทำงานตรงเดียวกันยกเว้นแทนสำหรับ.attr().prop()
ในการทำให้อินพุตใช้แบบอ่านอย่างเดียว:
$("#fieldName").attr('readonly','readonly');เพื่อให้การอ่าน / เขียนใช้:
$("#fieldName").removeAttr('readonly');การเพิ่มdisabledคุณสมบัติจะไม่ส่งค่าพร้อมโพสต์
คุณสามารถทำได้โดยเพียงแค่การทำเครื่องหมายหรือdisabled enabledคุณสามารถใช้รหัสนี้เพื่อทำสิ่งนี้:
//for disable
$('#fieldName').prop('disabled', true);
//for enable
$('#fieldName').prop('disabled', false);
หรือ
$ ('# fieldName'). prop ('อ่านอย่างเดียว', จริง);
$ ('# fieldName'). prop ('อ่านอย่างเดียว', false);
--- ดีกว่าที่จะใช้เสาแทน attr
ใช้ตัวอย่างนี้เพื่อสร้างกล่องข้อความแบบอ่านอย่างเดียวหรือไม่
<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />
<script>
$(document).ready(function(){
('.Btn_readOnly').click(function(){
$("#txt").prop("readonly", true);
});
('.Btn_notreadOnly').click(function(){
$("#txt").prop("readonly", false);
});
});
</script>
มีสองคุณลักษณะคือreadonlyและdisabledที่สามารถทำให้การป้อนข้อมูลแบบอ่านอย่างเดียว แต่มีความแตกต่างเล็กน้อยระหว่างพวกเขา
<input type="text" readonly />
<input type="text" disabled />
readonlyแอตทริบิวต์ทำให้ป้อนข้อความของคุณคนพิการและผู้ใช้จะไม่สามารถที่จะเปลี่ยนมันอีกต่อไปdisabledแอตทริบิวต์ทำให้การป้อนข้อความของคุณปิดการใช้งาน (ไม่เปลี่ยนแปลง) แต่ยังไม่สามารถที่จะส่งวิธีการ jQuery (1):
$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);
วิธีการ jQuery (2):
$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");
วิธี JavaScript:
document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;
PS นำมาใช้กับpropjQuery 1.6
ได้รับ -
<input name="foo" type="text" value="foo" readonly />งานนี้ - (jQuery 1.7.1)
$('input[name="foo"]').prop('readonly', true);ทดสอบกับอ่านอย่างเดียวและอ่านได้อย่างเดียว - ทำงานได้ทั้งคู่
อาจจะใช้งานแอททริบิวต์:
<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />หรือเพียงแค่ใช้ป้ายกำกับแท็ก:;)
<label><html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
</div>
</body>
<script type="text/javascript">
$(function()
{
$('#fieldName').attr('disabled', 'disabled');
});
</script>
</html>บางทีมันอาจมีความหมายที่จะเพิ่มเข้าไปด้วย
$('#fieldName').prop('readonly',false);สามารถใช้เป็นตัวเลือกสลับ ..
readonlyคุณสมบัติให้กับองค์ประกอบโดยไม่คำนึงถึงค่าที่ส่งผ่าน ดังนั้นตัวอย่างของคุณจะจบลงด้วยการทำให้ฟิลด์อินพุตเป็นแบบอ่านอย่างเดียวแม้จะตั้งค่าเป็นเท็จ
ใน JQuery 1.12.1 แอปพลิเคชันของฉันใช้รหัส:
$('"#raisepay_id"')[0].readOnly=true;
$('"#raisepay_id"')[0].readOnly=false;
และมันใช้งานได้
setReadOnly (state) มีประโยชน์มากสำหรับรูปแบบเราสามารถตั้งค่าเขตข้อมูลใด ๆ เพื่อ setReadOnly (สถานะ) โดยตรงหรือจากเงื่อนไขต่าง ๆ แต่ฉันชอบที่จะใช้ readOnly สำหรับการตั้งค่าความทึบให้กับตัวเลือกมิฉะนั้น attr = 'ปิดใช้งาน' ยังทำงานเหมือน วิธีการเดียวกัน.
ตัวอย่างแบบอ่านอย่างเดียว:
$('input').setReadOnly(true);หรือผ่าน codition ต่าง ๆ เช่น
var same = this.checked;
$('input').setReadOnly(same);ที่นี่เราใช้ค่าบูลีนสถานะเพื่อตั้งค่าและลบแอตทริบิวต์อ่านอย่างเดียวจากอินพุตขึ้นอยู่กับการคลิกช่องทำเครื่องหมาย
ใน html
$('#raisepay_id').attr("readonly", true)
$("#raisepay_id").prop("readonly",true);ใน bootstrap
$('#raisepay_id').attr("disabled", true)
$("#raisepay_id").prop("disabled",true);JQuery เป็นห้องสมุดที่เปลี่ยนแปลงและบางครั้งพวกเขาทำการปรับปรุงเป็นประจำ .attr () ใช้เพื่อรับแอททริบิวจากแท็ก HTML และในขณะที่มันทำงานได้อย่างสมบูรณ์แบบ. prop () ถูกเพิ่มเข้ามาในภายหลังเพื่อให้ความหมายมากขึ้นและใช้งานได้ดีขึ้นด้วยแอตทริบิวต์ที่มีค่าน้อยเช่น
ขอแนะนำว่าหากคุณใช้ JQuery รุ่นที่ใหม่กว่าคุณควรใช้ .prop () ทุกครั้งที่ทำได้