web-dev-qa-db-ja.com

JQueryを使って "disabled"属性を削除するにはどうすればいいですか？

最初に入力を無効にしてからリンクをクリックして有効にする必要があります。

これは私が今までに試したことですが、うまくいきません。

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'));
});
javascriptjquerydisabled-input
342
fatiDev

常にprop()メソッドを使用して、jQueryを使用するときに要素を有効または無効にします（理由については以下を参照）。

あなたの場合、それは次のようになります：

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

jsFiddleの例はこちら

prop()/attr()を使用してこれを行うことができるのに、なぜremoveAttr()を使用するのですか？

基本的に、propertiesを取得または設定するときは、prop()を使用する必要があります（autoplay、checked、disabled、requiredなど）。

removeAttr()を使用すると、disabled属性自体を完全に削除できますが、prop()は単にプロパティの基になるブール値をfalseに設定するだけです。

あなたがやりたいことはattr()/removeAttr()を使用してできますが、それはすべきであることを意味しません（そして奇妙/問題を引き起こす可能性があります）この場合のように、動作）。

次の抜粋（ prop（）のjQueryドキュメント から取得）は、これらのポイントをより詳細に説明しています。

「属性とプロパティの違いは特定の状況で重要になる可能性があります。jQuery1.6より前では、一部の属性を取得するときに.attr()メソッドがプロパティ値を考慮することがあり、一貫性のない動作を引き起こす可能性がありました。jQuery1.6では、.prop()メソッドは.attr()は属性を取得しますが、明示的にプロパティ値を取得します。」

「プロパティは通常、シリアル化されたHTML属性を変更せずにDOM要素の動的状態に影響します。例には、入力要素のvalueプロパティ、入力およびボタンのdisabledプロパティ、またはチェックボックスのcheckedプロパティが含まれます。.prop()メソッドは、 .attr()メソッドの代わりにdisabledとcheckedを設定します。valueを取得および設定するには、.val()メソッドを使用する必要があります。

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

37
Muthu Kumaran

無効な属性の使用を削除する

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

無効な属性の使用を追加する

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

楽しい ：）

34
Umesh Patil

こんな感じで、

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
 });
15
Dhamu

私はあなたが トグル 無効状態にしようとしていると思う、魔女の場合あなたはこれを使うべきです（ この質問 から）：

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

これは実用的なフィドルです。

9
nicosantangelo

これが私にとってうまくいった唯一のコードです。

element.removeProp('disabled')

removePropではなくremoveAttrです。

ここではjQuery 2.1.3を使っています。

4
Leniel Maccaferri

これはあなたが簡単にセットアップできると思った

$(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
Er.gaurav soni

2018、JQueryなし

私の質問はJQueryに関することを知っています。この答えはFYIです。 

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
});
1
rap-2-h