Отключить / включить вход с помощью jQuery? - PullRequest
2122 голосов
/ 12 сентября 2009
$input.disabled = true;

или

$input.disabled = "disabled";

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

Ответы [ 17 ]

3600 голосов
/ 12 сентября 2009

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

55 голосов
/ 18 июля 2012

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

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

и

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
30 голосов
/ 07 апреля 2014
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Иногда вам нужно отключить / включить элемент формы, такой как input или textarea. Jquery поможет вам легко сделать это, установив для атрибута disabled значение «disabled». Например ::

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

13 голосов
/ 06 сентября 2014
$("input")[0].disabled = true;

или

$("input")[0].disabled = false;
7 голосов
/ 18 октября 2014

Вы можете поместить это где-то глобально в вашем коде:

$.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();
6 голосов
/ 12 сентября 2014

Если вы просто хотите инвертировать текущее состояние (например, поведение переключателя):

$("input").prop('disabled', ! $("input").prop('disabled') );
4 голосов
/ 02 августа 2018

Есть много способов их использования, вы можете включить / отключить любой элемент :

Подход 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.

2 голосов
/ 02 августа 2018

Вы можете использовать метод 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>
2 голосов
/ 11 февраля 2018

Обновление на 2018 год:

Теперь нет необходимости в jQuery, и прошло довольно много времени с тех пор, как document.querySelector или document.querySelectorAll (для нескольких элементов) выполняют почти такую ​​же работу, что и $, плюс более явные getElementById, getElementsByClassName, getElementsByTagName

Отключение одного поля класса «input-checkbox»

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

или несколько элементов

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
1 голос
/ 21 сентября 2018

Отключение:

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