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


$input.disabled = true;

або

$input.disabled = "disabled";

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


1913
2017-09-12 05:21


походження


можливий дублікат Видалити атрибут вимкнено за допомогою jQuery? - user2381114
Я знайшов Залежить від плагін, який ви можете знайти корисним - Ben


Відповіді:


jQuery 1.6+

Щоб змінити disabled власність, яку ви повинні використовувати .prop() функція

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 і нижче

The .prop() Функція не існує, але .attr() робить подібне:

Встановіть атрибут disabled.

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

Щоб знову ввімкнути, правильний спосіб використовувати .removeAttr()

$("input").removeAttr('disabled');

У будь-якій версії jQuery

Ви завжди можете покладатися на фактичний об'єкт DOM і, ймовірно, трохи швидше, ніж інші два варіанти, якщо ви маєте справу лише з одним елементом:

// assuming an event handler thus 'this'
this.disabled = true;

Перевага використання .prop() або .attr() методи полягають у тому, що ви можете встановити властивість для купи вибраних елементів.


Примітка: У 1.6 існує a .removeProp() метод, який звучить дуже схоже removeAttr(), Але це НЕ ВИКОРИСТОВУЄТЬСЯ на рідних властивостях, як 'disabled'  Витяг із документації:

Примітка. Не використовуйте цей метод для видалення власних властивостей, таких як позначені, вимкнені чи вибрані. Це призведе до повного видалення майна, і після видалення його не можна буде знову додати до елемента. Використовуйте .prop (), щоб замість цього встановити ці властивості на "помилкові".

Фактично, я сумніваюся, що для цього методу існує безліч законних застосувань, логічні реквізити виконуються таким чином, що ви повинні встановити їх на фальшиві, а не "видаляти" їх, як їхні "атрибути" аналоги в 1.5


3293
2017-09-12 05:23



На відміну від цього, пам'ятайте, що, якщо ви хочете відключити всі елементи керування вводом форм - у тому числі. прапорці, радіоприймачі, текстові поля та інше - потрібно вибрати ':input', не лише 'input'. Останній вибирає лише фактичні елементи <input>. - Cornel Masson
@CornelMasson input,textarea,select,button трохи краще використовувати, ніж :input - :input як селектор досить неефективний, тому що він повинен вибрати * потім петлі над кожним елементом і фільтрувати за tagname - якщо ви передаєте 4 тегам селектори безпосередньо це набагато швидше. Крім того, :input не є стандартним селектором CSS, тому будь-які досягнення, які можна досягти querySelectorAll втрачені - gnarf
Це лише заважає користувачеві отримати доступ до неї, чи він фактично вилучає його з веб-запиту? - OneChillDude
Використовуючи .removeProp("disabled") викликав проблему "повністю скасовується майно і не додавався знову", як зазначив @ThomasDavidBaker, у випадку деяких браузерів, таких як Chrome, тоді як він працював добре, подібно до Firefox. Нам варто бути уважним тут. Завжди використовуйте .prop("disabled",false) замість цього - Sandeepan Nath
Ні .prop, ні .attr недостатньо для відключення якоря елементів; . Prop не буде навіть виділяти "контроль" (.attr робить, але href як і раніше активний). Вам також потрібно додати обробник подій кліків, який викликає preventDefault (). - Jeff Lowery


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

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

і

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

51
2017-07-18 11:51



Джайкс! Чому $(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
Перші роботи з елементами, вставленими в DOM, в будь-якій точці, останні лише для тих, що існують на той момент. - crazymykl
@crazymykl Правильно, але ви не повинні додавати елементи з ідентифікатором, який вже присутній на вашій сторінці. - SepehrM


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

Іноді вам потрібно відключити / включити елемент форми, наприклад, вхідний або текстовий. Jquery допомагає легко зробити це за допомогою атрибута disabled 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


25
2018-04-07 10:27





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

або

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

12
2017-09-06 14:53



Звичайно, запитання про jQuery, і це змінює стан в простий JavaScript, але це працює. - basic6
Це змінює стан у JavaScript, але для вибору першого вводу він як і раніше використовує селектор jQuery. - cjsimon
Але я не думаю, що ми створюємо енциклопедію jquery тут, якщо відповідь працює, це добре - Sajjad Shirazy
Це хороша відповідь, спасибі. - Ali Karaca


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

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

7
2017-10-18 13:42



Хоча обгортання функціональності зручно, ви повинні були використовувати prop і ні  attr з disabled властивість його правильно працювати (припускаючи, що jQuery 1.6 або вище). - Gone Coding
@ TrueBlueAussie Який недолік використання attr ? Я використовую цей код у деяких проектах і наскільки я пам'ятаю, це добре працює - Nicolae Surdu
Очевидними винятками є елементи керування з властивостями за сценою. Найвідоміший - це checkedвластивість прапорців Використовуючи attr не дасть такого ж результату. - Gone Coding
Це "$ (". MyInputs "). Enable ();" не працюють для мене, але це "$ (el) .removeAttr ('disabled');" працює дуже добре, спасибі - CrsCaballero


Якщо ви просто хочете інвертувати поточний стан (наприклад, поведінку кнопки перемикання):

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

4
2017-09-12 16:28





Оновлення до 2018 року:

Тепер немає необхідності в jQuery, і це вже через деякий час document.querySelector  або document.querySelectorAll (для декількох елементів) виконують майже тотожну роботу як $, а також більш явні getElementById, getElementsByClassName, getElementsByTagName

Вимкнення одного поля класу вводу-checkbox

document.querySelector('.input-checkbox').disabled = true;

або кілька елементів

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

2
2018-02-11 18:29



це питання запитує про jQuery ... але однаково ваша заява є правильною, і варто знати, що jQuery не має треба щоб бути використаним для цього, коли є кілька елементів більше. - ADyson


Ви можете використовувати метод 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
2017-08-02 10:26



Спаситель життя ... спасибі @ Спартан - wild coder


Існує кілька способів їх використання, ви можете включити / вимкнути будь-який елемент :

Підхід 1

$("#txtName").attr("disabled", true);

Підхід 2

$("#txtName").attr("disabled", "disabled");

Якщо ви використовуєте jQuery версії 1.7 або новішої версії, скористайтеся підтримкою (), а не 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.


1
2017-08-02 10:59





Я використав @ negarf відповідь і додав його як функцію

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

Потім скористайтеся таким

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

0
2017-11-16 10:24