人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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


●質問者: ryuvay
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● cno
●25ポイント

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


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

質問者から

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


2 ● Cherenkov
●25ポイント

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)がナウい書き方。


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

質問者から

まだまだ全然にわかコーダーなので晒すのが恥ずかしいですが、一部抜粋です
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)」と書くのはもはや古い」の記事も読みました。関係あるような関係ないような、いまいちパッとしないんですよね。うまくいえませんが・・・。もっと勉強していけば理解できるようになるんでしょうか。


3 ● Lhankor_Mhy
●50ポイント ベストアンサー

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


ryuvayさんのコメント
?!?! ・・・・・たしかに動いてますね・・・、ということで今、全てのコードを("disabled", true)に戻して実装させてみると・・・・動きました・・・・・。 なんだったんだ、いったい・・・・。 記述ミスやスペルミスは、ありえないし(手打ちでもやりましたし、動いている部分からのコピペでも何度も何度もやってましたので)よくわからないですね・・・。 みなさま、ありがとうございます。 なんだか納得いかない気もしますが、とりあえず、今はどっちでも動作しております。 お騒がせしました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ