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

$input.disabled = true;

или

$input.disabled = "disabled";

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

12.09.2009 05:21:54
user2381114 29.04.2014 12:58:30
Я нашел плагин DependsOn, который вам может пригодиться
Onshop 4.07.2014 09:52:18
18 ОТВЕТОВ
РЕШЕНИЕ

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

3800
25.06.2014 20:18:33
Кроме того, помните, что если вы хотите отключить ВСЕ элементы управления вводом формы - вкл. флажки, радио, текстовые и т. д. - вы должны выбрать ':input', а не только 'input'. Последний выбирает только актуальные элементы <input>.
Cornel Masson 16.08.2012 08:10:20
@CornelMasson input,textarea,select,buttonнемного лучше использовать, чем :input- :inputпоскольку селектор довольно неэффективен, потому что он должен *затем выбирать циклы по каждому элементу и фильтровать по тэгам - если вы передадите 4 селектора тэгов напрямую, это НАМНОГО быстрее. Кроме того, :inputон не является стандартным селектором CSS, поэтому возможное увеличение querySelectorAllпроизводительности потеряно
gnarf 16.09.2012 07:01:05
Это только мешает пользователю получить к нему доступ, или он фактически удаляет его из веб-запроса?
OneChillDude 2.05.2013 15:45:54
Использование .removeProp("disabled")было причиной проблемы «свойство полностью удалялось и больше не добавлялось», как указывалось @ThomasDavidBaker, в случае некоторых браузеров, таких как Chrome, тогда как на некоторых, как Firefox, оно работало нормально. Мы действительно должны быть осторожны здесь. Всегда используйте .prop("disabled",false)вместо этого
Sandeepan Nath 25.06.2014 08:08:17
Ни .prop, ни .attr не достаточно для отключения якорных элементов; .prop даже не выделит «контроль» серым цветом (.attr делает, но href все еще активен). Вы также должны добавить обработчик события click, который вызывает protectDefault ().
Jeff Lowery 25.09.2014 18:50:40

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

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

а также

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
61
29.05.2013 12:43:32
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 31.07.2013 20:09:16
Первый работает для элементов, вставленных в DOM в любой момент, второй - только для тех, которые существуют в данный момент.
crazymykl 10.10.2013 16:56:03
@crazymykl Правильно, но вы не должны добавлять элементы с идентификатором, уже присутствующим на вашей странице.
SepehrM 7.04.2016 13:46:47
    // 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

33
7.04.2014 10:27:16
$("input")[0].disabled = true;

или

$("input")[0].disabled = false;
13
11.09.2014 08:33:11
Конечно, вопрос задан для jQuery, и это меняет состояние в простом JavaScript, но это работает.
basic6 21.10.2014 15:16:17
Это изменяет состояние в JavaScript, но все еще использует селектор jQuery для получения первого ввода.
cjsimon 1.05.2018 21:41:07
Но я не думаю, что мы делаем энциклопедию jquery здесь, если ответ работает, это хорошо
Sajjad Shirazy 2.05.2018 06:48:23

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

$("input").prop('disabled', ! $("input").prop('disabled') );
6
12.09.2014 16:28:25

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

$.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();
8
26.10.2014 23:35:01
Хотя упаковка функциональности удобно, вы должны были использовать propи не attr с disabledсобственностью для того , чтобы правильно работать (при условии , JQuery 1.6 или выше).
Gone Coding 20.05.2015 12:54:37
@TrueBlueAussie Каковы недостатки использования attr? Я использую приведенный выше код в некоторых проектах, и насколько я помню, он работает нормально
Nicu Surdu 20.05.2015 14:56:01
Очевидными исключениями являются элементы управления со свойствами за сценой. Самым известным является checkedсвойство флажков. Использование attrне даст тот же результат.
Gone Coding 20.05.2015 14:58:30
<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
26.09.2015 10:22:38
Из очереди отзывов : Могу ли я попросить вас добавить больше контекста вокруг вашего ответа. Ответы только на код трудно понять. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост.
RBT 11.05.2017 01:41:56

В jQuery Mobile:

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

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

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

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
-1
8.01.2018 14:27:23

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

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

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

$('#myElement').disable(true);
0
16.11.2017 10:24:59

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

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

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

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

$("input").attr('disabled', true);
1
22.09.2018 07:02:50
Спасибо, это помогло мне изолировать входное имя. $("input[name=method]").prop('disabled', true);
Harry Bosh 24.04.2019 09:30:05

Обновление для 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);
2
11.02.2018 18:29:49
вопрос конкретно задает вопрос о jQuery ... но в равной степени ваше утверждение верно, и стоит знать, что jQuery не нужно использовать для этого, когда больше элементов.
ADyson 1.03.2018 21:33:34

2018, без JQuery (ES6)

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

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

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

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

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

0
4.06.2018 13:52:45

Вы можете использовать метод 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
2.08.2018 10:26:25

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

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

5
10.11.2018 07:47:13

Отключить:

$('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
21.09.2018 07:04:29

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

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

    $( "#id" ).prop( "disabled", false );
0
31.10.2018 08:38:36

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

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
1
22.02.2019 13:50:58

Подход 4 (это расширение ответа дикого кодера )

txtName.disabled=1     // 0 for enable
<input id="txtName">

0
9.01.2020 18:50:58