jQuery INPUTタグにおけるdisabled要素の操作について


(1) .attr("disabled", true)
(2) .attr("disabled", "disabled")

この2つの違いはなんでしょう??
同一プラグイン内、同一HTML内で(1)だけを使っていましたが、disabledになってくれる箇所となってくれない箇所があり、disabledになってくれない箇所のみを(2)に変えると全てにおいて想定どおりの動きをしてくれました。
解決はしたものの、理由がわかっていないとまたハマリそうなので後学のためにも違いをご教授ください。・・・jQuery自体のバージョンの問題?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/21 14:56:00
  • 終了:2013/06/22 11:19:24

ベストアンサー

id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/06/22 10:39:06

ポイント50pt

http://jsfiddle.net/PyJdw/
追記を元に再現してみましたが、動作しちゃいますね。実際のコードと何が違いますか?

id:ryuvay

?!?!
・・・・・たしかに動いてますね・・・、ということで今、全てのコードを("disabled", true)に戻して実装させてみると・・・・動きました・・・・・。
なんだったんだ、いったい・・・・。
記述ミスやスペルミスは、ありえないし(手打ちでもやりましたし、動いている部分からのコピペでも何度も何度もやってましたので)よくわからないですね・・・。

みなさま、ありがとうございます。
なんだか納得いかない気もしますが、とりあえず、今はどっちでも動作しております。
お騒がせしました。

2013/06/22 11:18:17

その他の回答(2件)

id:cno No.1

cno回答回数124ベストアンサー獲得回数122013/06/21 21:31:05

ポイント25pt

http://weble.org/2011/08/24/clear-the-disabled-form-with-jquery
のページのコメントの記載が該当しますかね?

id:ryuvay

実はそこを見て(2)に気がついたので、それは把握しています。少し言い方を変えると、ひとつのHTMLファイル内にいくつかのINPUTダグがあり、そのHTMLファイルからひとつのjQueryプグインjsファイルを呼び出しており、そのひとつのjsファイルの記述において(1)のみを使っていたが、typeがtextのINPUTにおいて(1)が使えなかった箇所があり、その箇所のみ(2)に変えると全てがうまくいった、と言うことなのです。まだ全てを(2)にして試してはいないですが、どういう時に(2)を使う必要があるのかご教授いただきたいのです。同じファイルの中で全てremoveAttr("disabled")としているのに(1)が使えない場合の理由が知りたということです。「とりあえず、(1)が使えなきゃ(2)にするか、全部(2)にしとけばいい」と言うことならば、それはそれで納得するしかないですが・・・。

2013/06/21 22:16:25
id:ryuvay

そうですね、カンジンなことを書き忘れてました。読み込ませているjQueryは下記の通りです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932013/06/21 23:44:40

ポイント25pt

HTML非表示・使用不可メモ(Hishidama’s disabled/visibility/display Memo)
doctype宣言によってdisabledの厳密な書き方が変わったり、ブラウザによって解釈が変わる気がするので、自分はdisabledを有効にする場合は.attr('disabled', true)、無効にする場合は.removeAttr('disabled')と書くことが多いです。

追記
最近はprop()だそうで
jQueryで「jQuery(”input”).attr(”disabled”,true)」と書くのはもはや古い

タレコミによると、attr('disabled', 'disabled')のようにしていたのをtrue/falseで扱ったりするのがprop()ということらしいです。なので.prop('disabled', true)がナウい書き方。

id:Cherenkov

(1)でうまくいかないのはコードを提示してみたらどうですかね。だれかがツッコミいれてくれるはず。

2013/06/21 23:51:26
id:ryuvay

まだまだ全然にわかコーダーなので晒すのが恥ずかしいですが、一部抜粋です
jQuery("input.related2").click(function() {
var tmp2 = jQuery("input[name=related2]:checked").val(); //ラジオボタンの状態取得
if (tmp2 == ""){ //ラジオボタンの中身がカラ(=その他)
jQuery("input.related_o2:disabled").removeAttr("disabled"); //テキストフォーム有効化
} else {
jQuery("input.related_o2:enabled").attr("disabled", "disabled").val("");//テキストフォーム無効化
}
});
ぶっちゃけ、ラジオボタンで「その他」を選択すると横にあるフォームが有効化されるっていうよくあるヤツです。「その他」のValue値を""としてオペレータさんには、その他のValue値を見せずに、その隣のTEXTのValue値を見せるという発想からこうしました。(PHPに渡して取得したラジオボタンとTEXTの結果を並べて書き出せば、その他と言う記述は無く、結果的にTEXTの内容だけが表示されるようにと言う意図です)
ここではクラス.related_o2のdisabled操作をしています、同様にクラスrelated_o1も同じ挙動。両方(1)では動かず(2)にすると動きました。なお、この2つはtype="text"です。しかし、それ以外のチェックボックスやラジオボタンでは(1)のままで問題なく動いてるんです。(おかげでgoogle先生に聞きまくってこれに気がつくのに3時間以上費やしました)
textだからってことなのでしょうか?まだ試していないのでわかりませんが・・・。
もちろん「jQueryで「jQuery(”input”).attr(”disabled”,true)」と書くのはもはや古い」の記事も読みました。関係あるような関係ないような、いまいちパッとしないんですよね。うまくいえませんが・・・。もっと勉強していけば理解できるようになるんでしょうか。

id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/06/22 10:39:06ここでベストアンサー

ポイント50pt

http://jsfiddle.net/PyJdw/
追記を元に再現してみましたが、動作しちゃいますね。実際のコードと何が違いますか?

id:ryuvay

?!?!
・・・・・たしかに動いてますね・・・、ということで今、全てのコードを("disabled", true)に戻して実装させてみると・・・・動きました・・・・・。
なんだったんだ、いったい・・・・。
記述ミスやスペルミスは、ありえないし(手打ちでもやりましたし、動いている部分からのコピペでも何度も何度もやってましたので)よくわからないですね・・・。

みなさま、ありがとうございます。
なんだか納得いかない気もしますが、とりあえず、今はどっちでも動作しております。
お騒がせしました。

2013/06/22 11:18:17
  • id:cno
    jQueryのバージョンやブラウザはどのような構成ですか?
    (意外とバージョン間の差があるので、回答する人のヒントになるかも)

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません