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

Question

$input.disabled = true;

или

$input.disabled = "disabled";

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

Answer 1

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.

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

Answer 2

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

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

и

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

Answer 3

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

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

Answer 4

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

или

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

Answer 10

Запрещать:

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

Answer 11

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

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

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

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

Answer 12

2018, без JQuery (ES6)

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

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

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

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

Вопрос с JQuery, это просто К вашему сведению.

Answer 13

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

  

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

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

  

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

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

Answer 14

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

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

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

Answer 15

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

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

Answer 16

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

Answer 17

В jQuery Mobile:

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

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

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

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