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

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.

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

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

а также

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

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

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

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

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

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

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

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

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

Обновление на 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);

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

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

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

Запрещать:

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

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

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

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

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

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

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

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

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

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

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

Затем используйте это

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

2018, без JQuery (ES6)

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

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

Отключить input с помощью id="my-input"

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

Вопрос в том, с JQuery, это просто к сведению.

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

txtName.disabled=1     // 0 for enable

<input id="txtName">

Альтернативный способ отключить поле ввода - использовать jQuery и css следующим образом:

jQuery("#inputFieldId").css({"pointer-events":"none"})

и для включения того же ввода код выглядит следующим образом:

jQuery("#inputFieldId").css({"pointer-events":""})

В jQuery Mobile:

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

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

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

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