Как удалить атрибут «отключен» с помощью jQuery?

394

Сначала я должен отключить входы, а затем щелкнуть ссылку, чтобы включить их.

Это то, что я пробовал до сих пор, но это не работает.

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

JQuery:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').removeAttr("disabled")
});


Это показывает мне, trueа затем, falseно ничего не меняется для входов:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});
fatiDev
источник
2
Я не вижу твоей проблемы. Что ты спрашиваешь?
Никосантанджело
Так в чем же вопрос? Я имею в виду, с какой проблемой вы сталкиваетесь
Сатья Теджа
7
Используйте prop () - .prop ('disabled', false)
Джей Бланшар
Если ваша проблема решена, поставьте галочку в принятом (реальном) ответе, чтобы другие знали ...
Дхаму
проблема в том что он не отключается после
клика

Ответы:

817

Всегда используйтеprop() метод для включения или отключения элементов при использовании jQuery (см. Ниже, почему).

В вашем случае это будет:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

Пример jsFiddle здесь.


Зачем использовать, prop()когда вы можете использовать attr()/, removeAttr()чтобы сделать это?

В принципе, prop()должны быть использованы при получении или настройки свойств (таких , как autoplay, checked, disabledи requiredсреди прочих).

Используя removeAttr(), вы полностью удаляете сам disabledатрибут, а prop()просто устанавливаете базовое логическое значение свойства в false.

Хотя то, что вы хотите сделать, может быть сделано с помощью attr()/ removeAttr(), это не значит, что это должно быть сделано (и может вызвать странное / проблемное поведение, как в этом случае).

Следующие выдержки (взятые из документации jQuery для prop () ) объясняют эти моменты более подробно:

«Различия между атрибутами и свойствами могут быть важны в определенных ситуациях. До jQuery 1.6 .attr()метод иногда учитывал значения свойств при получении некоторых атрибутов, что может вызвать противоречивое поведение. Начиная с jQuery 1.6, .prop() метод предоставляет способ явного извлечения значения свойств, в то время как .attr()извлекает атрибуты. "

«Свойства обычно влияют на динамическое состояние элемента DOM, не изменяя сериализованный атрибут HTML. Примеры включают value свойство элементов ввода, disabledсвойство входов и кнопок или checkedсвойство флажка. .prop()Метод должен использоваться для установки, disabledа checkedне .attr() метод. .val()метод должен быть использован для получения и установки value«.

dsgriffin
источник
3
Люди должны также знать примыкать флаг грязного checkedness, который полностью ломается attrпротив propдля флажков: w3.org/TR/html5/forms.html#concept-input-checked-dirty для внутреннего JQuery , кроме как обойти это ограничение магии.
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
19
Хм, .prop («отключен», false), похоже, не работает для меня в кнопке - оставляет атрибут «отключен» в теге без значения.
UpTheCreek
3
@UpTheCreek не работал для меня тоже. Но я обнаружил, что проблема с предложением «this» (как обычно). В конкретном случае .prop()был выполнен элемент, на который указывает this( this.prop("disabled", false)но в обратном вызове он связывался с неправильным элементом, поэтому мне пришлось сделать общий var that = thisобходной путь. Попытка поиграть с .apply()/ .call()не работала; я не знаю почему. Дважды проверьте с, console.log(this)если он установлен на нужный объект, непосредственно перед вызовомthis.prop(...)
Kamafeather
3
Я выдвигаю этот ответ в качестве кандидата для преобразования в раздел документа. Четко, полно, хорошо написано.
Энн Ганн
4
Используя removeAttr (), вы полностью удаляете сам атрибут disabled - в то время как prop () просто устанавливает базовое логическое значение свойства в false. Я не верю, что это правда. В HTML простое присутствие disabledсвойства отключит элемент. Например, если <button disabled="false"></button> кнопка не активируется, свойство должно быть удалено. Позвонив $('button').prop('disabled', false);JQuery будет удалить свойство для вас, как я наблюдал в этом codepen (проверьте , чтобы увидеть удаление свойств).
Нафтали
42
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

Мутху Кумаран
источник
42

удалить отключенное использование атрибута,

 $("#elementID").removeAttr('disabled');

и добавить отключенное использование атрибута,

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

Наслаждаться :)

Умеш Патил
источник
4
Или просто element.removeAttribute («отключен») в vanilla js
Драгос Русу
16

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

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });
Дхаму
источник
6
Этот на самом деле работает для меня. Подставка («отключена», ложная) на удивление не сработала.
Стефан
@ Стефан тоже самое здесь! Вы узнали почему?
Александр Сурафель
1
Я знаю, что это древняя нить, но если кто-то все еще борется с этим, моя проблема была в том, что элемент был <a>, на котором .prop('disabled', false)не работает. Я поменял его на a <button>и теперь он работает
Оливер Надь
3

Мысль это вы можете легко настроить

$(function(){
$("input[name^=radio_share]").click
(
    function()
    {
        if($(this).attr("id")=="radio_share_dependent")
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);   
        }
        else
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);   
        }
    }
 );
});
Эргагаурав сони
источник
3

Это был единственный код, который работал для меня:

element.removeProp('disabled')

Обратите внимание, что это removePropи нет removeAttr.

Я использую jQuery 2.1.3здесь.

Лениэль Маккаферри
источник
12
Из документации jQuery: Важно: метод .removeProp () не должен использоваться для установки этих свойств в false. После удаления нативного свойства его нельзя добавить снова. Смотрите .removeProp () для получения дополнительной информации.
XanatosLightfiren
2

2018, без JQuery

Я знаю, что вопрос о JQuery: этот ответ только к вашему сведению.

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 
рэп-2-х
источник
0

В этом вопросе конкретно упоминается jQuery, но если вы хотите выполнить это без jQuery, эквивалент в vanilla JavaScript:

elem.removeAttribute('disabled');
jdgregson
источник
elem.removeAttr('disabled');работает для меня
Чэн Хуэй Юань