تمكين/تعطيل إدخال مع jQuery ؟

Question

$input.disabled = true;

أو

$input.disabled = "disabled";

الذي هو المعيار الطريقة ؟ و على العكس من ذلك, كيف يمكنك تمكين المعوقين مدخلات ؟

Answer 1

مسج 1.6 +

لتغيير الخاصية disabled يجب عليك استخدام .prop() وظيفة.

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

1.5 مسج وتحت

وظيفة .prop() غير موجود، ولكن .attr() لا تشبه:

وتعيين سمة المعوقين.

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

لتمكين مرة أخرى، والطريقة الصحيحة لاستخدام .removeAttr()

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

في أي إصدار من مسج

ويمكنك دائما الاعتماد على الكائن DOM الفعلي وربما أسرع قليلا من الخيارين الآخرين إذا كنت تتعامل فقط مع عنصر واحد:

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

وميزة لاستخدام .prop() أو .attr() الطرق هو أنه يمكنك تعيين الخاصية لمجموعة من العناصر المحددة.

---

<قوية> ملاحظة: في 1.6 هناك .removeProp() الأسلوب الذي يبدو مثل الكثير removeAttr() ، ولكن على لا ينبغي أن تستخدم في الخصائص المحلية مثل مقتطفات 'disabled' من الوثائق:

<اقتباس فقرة>   

ملحوظة: لا تستخدم هذه الطريقة لإزالة الخصائص المحلية مثل فحص، والمعوقين، أو في المختارة. سيؤدي ذلك إلى إزالة الملكية تماما، وبمجرد إزالة، لا يمكن أن تضاف مرة أخرى إلى عنصر. استخدام .prop () لتعيين هذه الخصائص إلى false بدلا من ذلك.

في الواقع، أشك في أن هناك العديد من الاستخدامات المشروعة لهذه الطريقة، تتم الدعائم المنطقية في مثل هذه الطريقة التي يجب أن تضعها إلى false بدلا من "إزالة" لهم مثل نظرائهم "سمة" في 1.5

Answer 2

وفقط من أجل اتفاقيات جديدة && مما يجعلها قابلة للتكيف للمضي قدما (ما لم تتغير الأمور بشكل جذري مع ECMA6 (؟؟؟؟):

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

و

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

Answer 3

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

وأحيانا تحتاج إلى تعطيل / تمكين عنصر النموذج مثل الإدخال أو جزء النص. مسج يساعدك على جعل هذا بسهولة مع وضع السمة المعوقين إلى "معطل". لمنها مثلا:

  //To disable 
  $('.someElement').attr('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

Answer 4

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

أو

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

Answer 5

ويمكنك وضع هذا في مكان ما في العالم في التعليمات البرمجية:

$.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();

Answer 6

إذا كنت ترغب فقط في عكس الحالة الراهنة (مثل سلوك زر تبديل):

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

Answer 7

هناك العديد من طرق استخدامها يمكنك تمكين/تعطيل أي عنصر :

النهج 1

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

نهج 2

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

إذا كنت تستخدم مسج 1.7 أو إصدار أعلى ثم استخدام دعامة () ، بدلا من attr().

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

إذا كنت ترغب في تمكين أي عنصر ثم عليك أن تفعل عكس ما فعلته تجعل تعطيل.ومع ذلك مسج يوفر طريقة أخرى لإزالة أي سمة.

النهج 1

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

نهج 2

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

النهج 3

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

مرة أخرى, إذا كنت تستخدم مسج 1.7 أو إصدار أعلى ثم استخدام دعامة () ، بدلا من attr().هذا هو.هذا كيف يمكنك تمكين أو تعطيل أي عنصر باستخدام مسج.

Answer 8

وتحديث ل2018:

والآن ليس هناك حاجة لمسج وانها كانت منذ بعض الوقت document.querySelector أو document.querySelectorAll (لعناصر متعددة) القيام تقريبا نفس بالضبط وظيفة $، بالإضافة إلى تلك أكثر وضوحا getElementById، getElementsByClassName، getElementsByTagName

وتعطيل حقل واحد من "المدخلات مربع" الطبقة

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

وأو عناصر متعددة

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

Answer 9

يمكنك استخدام مسج دعامة() طريقة تعطيل أو تمكين عنصر النموذج أو عنصر التحكم بشكل حيوي باستخدام 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>

Answer 10

وتعطيل:

$('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.

Answer 11

واعتدتgnarf الجواب وأضافت أن وظيفة

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

وبعد ذلك استخدام مثل هذا

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

Answer 12

2018 ، دون مسج (ES6)

تعطيل جميع input:

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

تعطيل input مع id="my-input"

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

السؤال هو مع مسج, انها فقط لمعلوماتك.

Answer 13

تعطيل ينطبق على نوع الإدخال :

في حالة محددة نوع الإدخال (Ex.نوع النص الإدخال)

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

كل نوع من نوع الإدخال

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

Answer 14

استخدم مثل هذا،

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

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

Answer 15

وهذا يعمل بالنسبة لي

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

Answer 16

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

Answer 17

في مسج الجوال:

لتعطيل

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

لتمكين

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