Вимкнути / увімкнути вхід за допомогою jQuery?

$input.disabled = true;

або

$input.disabled = "disabled";

Який стандартний спосіб? І, навпаки, як увімкнути відключений вхід?

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

Тільки заради нових конвенцій та&працьовування адаптації, яка рухається вперед (якщо тільки з 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 );

Іноді потрібно вимкнути / ввімкнути такий елемент форми, як введення або textarea. Jquery допомагає вам легко зробити це за допомогою встановлення атрибута вимкнено на "вимкнено". Наприклад:

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

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

або

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

Ви можете поставити це десь глобальним у своєму коді:

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

Відключення одного поля класу "вхідний прапорець"

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>

Вимкнути:

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

Вимкнути вірно для типу введення:

У випадку конкретного типу введення ( наприклад, тип введення тексту )

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

Для всіх типів типу введення

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

це працює для мене

$("#values:input").attr("disabled",true);
$("#values:input").attr("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, це просто FYI.

Підхід 4 (це розширення відповіді дикого кодера )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Використовуйте так,

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

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

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

У jQuery Mobile:

Для відключення

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

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

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