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

Ответы:

3810

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()or .attr()заключается в том, что вы можете установить свойство для нескольких выбранных элементов.


Примечание: в 1.6 есть .removeProp()метод, который звучит очень похоже removeAttr(), но он НЕ ДОЛЖЕН ИСПОЛЬЗОВАТЬСЯ для нативных свойств, таких как 'disabled' Excerpt из документации:

Примечание. Не используйте этот метод для удаления собственных свойств, таких как отмеченные, отключенные или выбранные. Это полностью удалит свойство и после удаления не может быть снова добавлено к элементу. Используйте .prop (), чтобы вместо этих свойств установить false.

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

gnarf
источник
9
Кроме того, помните, что если вы хотите отключить ВСЕ элементы управления вводом формы - вкл. флажки, радио, текстовые и т. д. - вы должны выбрать ':input', а не только 'input'. Последний выбирает только актуальные элементы <input>.
Корнел Массон
35
@CornelMasson input,textarea,select,buttonнемного лучше использовать, чем :input- :inputпоскольку селектор довольно неэффективен, потому что он должен *затем выбирать циклы по каждому элементу и фильтровать по тэгам - если вы передаете 4 селектора тэгов напрямую, это НАМНОГО быстрее. Кроме того, :inputон не является стандартным селектором CSS, поэтому возможное увеличение querySelectorAllпроизводительности потеряно
gnarf
3
Это только мешает пользователю получить к нему доступ, или он фактически удаляет его из веб-запроса?
OneChillDude
4
Использование .removeProp("disabled")было причиной проблемы «свойство полностью удалялось и не добавлялось снова», как указывалось @ThomasDavidBaker, в случае некоторых браузеров, таких как Chrome, тогда как на некоторых, как Firefox, оно работало нормально. Мы действительно должны быть осторожны здесь. Всегда используйте .prop("disabled",false)вместо этого
Sandeepan Nath
6
Ни .prop, ни .attr не достаточно для отключения якорных элементов; .prop даже не выделит «контроль» серым цветом (.attr делает, но href все еще активен). Вы также должны добавить обработчик события щелчка, который вызывает предотвратительный вызов ().
Джефф Лоури
61

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

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

а также

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
geekbuntu
источник
12
Jikes! Почему $(document).on('event_name', '#your_id', function() {...})вместо $('#your_id').on('event_name', function() {...}). Как описано в документации jQuery .on (), первая использует делегирование и прослушивает все event_name события, которые всплывают, documentи проверяет их на соответствие #your_id. Последний слушает $('#your_id')только события, и это лучше масштабируется.
Peter V. Mørch
23
Первый работает для элементов, вставленных в DOM в любой момент, второй - только для тех, которые существуют в данный момент.
crazymykl
1
@crazymykl Правильно, но вы не должны добавлять элементы с идентификатором, уже присутствующим на вашей странице.
SepehrM
33
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

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

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

Харини Секар
источник
13
$("input")[0].disabled = true;

или

$("input")[0].disabled = false;
Саджад Ширази
источник
2
Конечно, вопрос задан для jQuery, и это меняет состояние в простом JavaScript, но это работает.
basic6
1
Это изменяет состояние в JavaScript, но все еще использует селектор jQuery для получения первого ввода.
cjsimon
3
Но я не думаю, что мы делаем энциклопедию jquery здесь, если ответ работает, это хорошо
Саджад Ширази
8

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

$.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();
Нику Сурду
источник
3
Хотя упаковка функциональности удобно, вы должны были использовать propи не attr с disabledсобственностью для того , чтобы правильно работать (при условии , JQuery 1.6 или выше).
Ушел кодирование
1
@TrueBlueAussie Каковы недостатки использования attr? Я использую приведенный выше код в некоторых проектах и, насколько я помню, он работает нормально
Нику Сурду
1
Очевидными исключениями являются элементы управления со свойствами за сценой. Самым известным является checkedсвойство флажков. Использование attrне даст тот же результат.
Ушел кодирование
7

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

$("input").prop('disabled', ! $("input").prop('disabled') );
Дейв
источник
1
спасибо, у меня есть то же самое для переключения; $ ("input"). prop ('disabled', function (i, v) {return! v;});
Floww
5

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

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

Обновление для 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);
Pawel
источник
1
вопрос, в частности, задается о jQuery ... но в равной степени ваше утверждение верно, и стоит знать, что jQuery не нужно использовать для этого, когда больше элементов.
ADyson
2

Вы можете использовать метод 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>
Спартанец
источник
1

Отключить:

$('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.
Томер Бен Дэвид
источник
1

Отключить true для типа ввода:

В случае определенного типа ввода ( напр., Ввод типа текста )

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

Для всех типов ввода

$("input").attr('disabled', true);
Хасиб Камаль
источник
1
Спасибо, это помогло мне изолировать имя входа. $("input[name=method]").prop('disabled', true);
Гарри Бош
1

это работает для меня

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
learnkevin
источник
0

Я использовал ответ @gnarf и добавил его как функцию

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

Тогда используйте как это

$('#myElement').disable(true);
Иманц Волков
источник
0

2018, без JQuery (ES6)

Отключить все input:

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

Отключить inputсid="my-input"

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

Вопрос с JQuery, это просто FYI.

рэп-2-х
источник
0

Используйте как это,

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

 $( "#id" ).prop( "disabled", false );
Абдус Салам Азад
источник
-1
<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>

источник
1
Из очереди отзывов : Могу ли я попросить вас добавить больше контекста вокруг вашего ответа. Ответы только на код трудно понять. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост.
RBT
-1

В jQuery Mobile:

Для отключения

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

Для включения

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
Атиф Хуссейн
источник