Вопрос: Отключить / включить ввод с помощью jQuery?


$input.disabled = true;

или

$input.disabled = "disabled";

Это стандартный способ? И, наоборот, как вы включаете отключенный ввод?


1886


источник


Ответы:


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 (), чтобы вместо этого установить эти свойства в false.

На самом деле, я сомневаюсь, что для этого метода существует много законных применений, логические реквизиты выполняются таким образом, что вы должны установить их в false, а не «удалять» их, как их «атрибутные» аналоги в 1.5


3255



Просто ради новых соглашений &&, делая его адаптируемым в будущем (если ситуация не изменится с ECMA6 (????):

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

а также

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

49



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

Иногда вам нужно отключить / включить элемент формы, например input или 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


24



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

или

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

10



You can put this somewhere global in your code:

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

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

And then you can write stuff like:

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

6



If you just want to invert the current state (like a toggle button behaviour):

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

4



Update for 2018:

Now there's no need for jQuery and it's been a while since document.querySelector or document.querySelectorAll (for multiple elements) do almost exactly same job as $, plus more explicit ones getElementById, getElementsByClassName, getElementsByTagName

Disabling one field of "input-checkbox" class

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

or multiple elements

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

1



I used @gnarf answer and added it as function

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

Then use like this

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

0



2018, without JQuery (ES6)

Disable all input:

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

Disable input with id="my-input"

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

The question is with JQuery, it's just FYI.


0