1. ホーム
  2. javascript

[解決済み] jQueryを使用して "disabled "属性を削除する方法は?

2022-03-21 15:16:36

質問

最初に入力を無効にして、リンクをクリックすると入力が有効になるようにしています。

これまで試してきたことですが、うまくいきません。

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'));
});

解決方法は?

常に を使用します。 prop() メソッドを使用して、jQueryを使用する際に要素を有効または無効にすることができます(理由は後述します)。

あなたの場合、それは

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

jsFiddleのサンプルはこちらです。


<ブロッククオート

なぜ prop() を使用することができます。 attr() / removeAttr() を行うのでしょうか?

基本的には prop() を取得または設定するときに使用する必要があります。 プロパティ など autoplay , checked , disabledrequired など)。

を使用することで removeAttr() を完全に削除していることになります。 disabled 属性そのものです。 prop() は、単にプロパティの基本的なブール値を false に設定するだけです。

一方、あなたがやりたいことは できる を使用して行われます。 attr() / removeAttr() を意味するものではありません。 べきである されることがあります(今回のように、奇妙で問題のある動作を引き起こすこともあります)。

以下、抜粋(以下、本書より抜粋) prop() の jQuery ドキュメント を参照してください。

<ブロッククオート

属性とプロパティの違いは、重要な場合があります。 特定の状況下で jQuery 1.6以前は .attr() メソッドは は、一部の属性を取得する際にプロパティの値を考慮します。 これは、一貫性のない動作を引き起こす可能性があります。jQuery 1.6以降では .prop() メソッドは、プロパティの値を明示的に取得する方法を提供し、一方 .attr() は属性を取得します。

プロパティは一般に、DOM 要素の動的な状態に影響を与えます。 は、直列化された HTML 属性を変更します。例としては value プロパティは、入力要素の disabled プロパティがあります。 ボタン、または checked プロパティがあります。チェックボックスの .prop() メソッド を設定するために使用する必要があります。 disabledchecked の代わりに .attr() メソッドを使用します。また .val() メソッドを使用する必要があります。 value ."