ปิดการใช้งาน / เปิดใช้งานอินพุตด้วย jQuery หรือไม่

$input.disabled = true;

หรือ

$input.disabled = "disabled";

วิธีมาตรฐานคืออะไร และในทางกลับกันคุณจะเปิดใช้งานอินพุตที่ปิดใช้งานอย่างไร

jQuery 1.6+

ในการเปลี่ยนdisabledคุณสมบัติคุณควรใช้.prop()ฟังก์ชั่น

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 และต่ำกว่า

.prop()ฟังก์ชั่นไม่ได้อยู่ แต่.attr()ไม่คล้ายกัน:

ตั้งค่าคุณลักษณะที่ปิดใช้งาน

$("input").attr('disabled','disabled');

เมื่อต้องการเปิดใช้งานอีกครั้งวิธีการที่เหมาะสมคือการใช้ .removeAttr()

$("input").removeAttr('disabled');

ใน jQuery ทุกรุ่น

คุณสามารถพึ่งพาวัตถุ DOM จริงและอาจเร็วกว่าอีกสองตัวเลือกเล็กน้อยหากคุณจัดการกับองค์ประกอบเดียวเท่านั้น:

// assuming an event handler thus 'this'
this.disabled = true;

ข้อดีของการใช้.prop()หรือ.attr()วิธีการคือคุณสามารถกำหนดคุณสมบัติให้กับรายการที่เลือก

หมายเหตุ:ใน 1.6 มี.removeProp()วิธีการที่ฟังดูเหมือนเป็นอย่างมากremoveAttr()แต่ไม่ควรใช้กับคุณสมบัติดั้งเดิมเช่น'disabled' ข้อความที่ตัดตอนมาจากเอกสาร:

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

ในความเป็นจริงฉันสงสัยว่ามีการใช้งานที่ถูกต้องตามกฎหมายสำหรับวิธีนี้อุปกรณ์ประกอบฉากบูลีนจะทำในลักษณะที่คุณควรตั้งค่าให้เป็นเท็จแทนที่จะ "ลบ" พวกเขาเช่นคู่ "แอตทริบิวต์" ใน 1.5

เพียงเพื่อประโยชน์ของการประชุมใหม่ && ทำให้สามารถปรับไปข้างหน้าได้ (เว้นแต่สิ่งที่เปลี่ยนแปลงไปอย่างมากด้วย ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

และ

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

บางครั้งคุณต้องปิดการใช้งาน / เปิดใช้งานองค์ประกอบแบบฟอร์มเช่นอินพุตหรือ textarea Jquery ช่วยให้คุณทำสิ่งนี้ได้อย่างง่ายดายด้วยการตั้งค่าคุณลักษณะที่ปิดใช้งานเป็น "ปิดการใช้งาน" ตัวอย่างเช่น:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

ในการเปิดใช้งานองค์ประกอบที่ถูกปิดใช้งานคุณจะต้องลบแอตทริบิวต์ "disabled" ออกจากองค์ประกอบนี้หรือปล่อยให้เป็นสตริง ตัวอย่างเช่น:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

อ้างอิง: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

$("input")[0].disabled = true;

หรือ

$("input")[0].disabled = false;

คุณสามารถใส่รหัสนี้ในที่อื่นทั่วโลก:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

จากนั้นคุณสามารถเขียนสิ่งที่ชอบ:

$(".myInputs").enable();
$("#otherInput").disable();

หากคุณเพียงต้องการกลับสถานะปัจจุบัน (เช่นพฤติกรรมปุ่มสลับ):

$("input").prop('disabled', ! $("input").prop('disabled') );

คุณสามารถเปิด / ปิดใช้งานองค์ประกอบใด ๆ ได้หลายวิธี:

วิธีที่ 1

$("#txtName").attr("disabled", true);

วิธีที่ 2

$("#txtName").attr("disabled", "disabled");

หากคุณใช้ jQuery 1.7 ขึ้นไปให้ใช้ prop () แทน attr ()

$("#txtName").prop("disabled", "disabled");

หากคุณต้องการเปิดใช้งานองค์ประกอบใด ๆ คุณเพียงแค่ทำสิ่งที่ตรงกันข้ามกับสิ่งที่คุณทำเพื่อปิดการใช้งาน อย่างไรก็ตาม jQuery มีวิธีอื่นในการลบคุณลักษณะใด ๆ

วิธีที่ 1

$("#txtName").attr("disabled", false);

วิธีที่ 2

$("#txtName").attr("disabled", "");

วิธีที่ 3

$("#txtName").removeAttr("disabled");

ถ้าคุณใช้ jQuery 1.7 ขึ้นไปให้ใช้ prop () แทน attr () นั่นคือ. นี่คือวิธีที่คุณเปิดใช้งานหรือปิดใช้งานองค์ประกอบใด ๆ โดยใช้ jQuery

อัพเดตสำหรับปี 2561:

ตอนนี้มีความจำเป็นในการ jQuery ไม่มีและจะได้รับในขณะที่ตั้งแต่document.querySelector หรือdocument.querySelectorAll(สำหรับองค์ประกอบหลาย) ทำผลงานได้เกือบจะเหมือนกันตรงตามที่ $ บวกคนที่ชัดเจนมากขึ้นgetElementById,getElementsByClassName ,getElementsByTagName

ปิดใช้งานหนึ่งฟิลด์ของคลาส "อินพุตช่องทำเครื่องหมาย"

document.querySelector('.input-checkbox').disabled = true;

หรือหลายองค์ประกอบ

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

คุณสามารถใช้วิธี jQuery prop () เพื่อปิดใช้งานหรือเปิดใช้งานองค์ประกอบแบบฟอร์มหรือควบคุมแบบไดนามิกโดยใช้ jQuery วิธี prop () ต้องใช้ jQuery 1.6 ขึ้นไป

ตัวอย่าง:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

ปิดการใช้งาน:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

เปิดใช้งาน:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

ปิดใช้งานจริงสำหรับประเภทอินพุต:

ในกรณีที่มีประเภทอินพุตเฉพาะ ( เช่นอินพุตประเภทข้อความ )

$("input[type=text]").attr('disabled', true);

สำหรับประเภทอินพุตทุกประเภท

$("input").attr('disabled', true);

มันใช้งานได้สำหรับฉัน

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

ฉันใช้คำตอบ @gnarf และเพิ่มเป็นฟังก์ชัน

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

จากนั้นใช้แบบนี้

$('#myElement').disable(true);

2561 โดยไม่มี JQuery (ES6)

ปิดการใช้งานทั้งหมดinput:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

ปิดการใช้งานinputด้วยid="my-input"

document.getElementById('my-input').disabled = true;

คำถามอยู่กับ JQuery เป็นเพียง FYI

วิธีที่ 4 (นี้เป็นส่วนหนึ่งของคำตอบ coder ป่า )

txtName.disabled=1     // 0 for enable

<input id="txtName">

ใช้แบบนี้

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

ใน jQuery Mobile:

สำหรับปิดการใช้งาน

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

สำหรับการเปิดใช้งาน

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');