- 締切済み
チェックボックスにチェックでプルダウン有効化
チェックボックスにチェックを入れると、 無効化していたプルダウンが有効化するようなフォームを作りたいと思っています。 やりたいことはまさに下記サイトに書かれているとおりなのですが 自分でやるとコピペしてもうまく動かず困っています。 http://studio3104.hatenablog.com/entry/2014/10/17/011941 当方ヴァージョンは『jquery-1.2.1.min.js』を使用しています。 無効化はできたのですが、チェックを入れても有効化しません。 『vue.js』もダウンロードしてみたものの、無効化すらうまくいかず… 何か他に方法があったりするものでしょうか？ よろしくお願いします。
- jojo99
- お礼率92% (13/14)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは ＞何か他に方法があったりするものでしょうか？ 基本的にはdisabled属性を操作することになるでしょうから、方法は同じと言えば同じでしょう。 全体の記述方法はいろいろあるかと思います。 ご提示のサンプルでは一意の要素を操作しているようなので、少しだけ一般化した一例を… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #hoge select{ width:5em; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#hoge").on("change", "input.fuga", function(){ var n = $(this).next("select"); if(this.checked) n.removeAttr("disabled"); else n.attr("disabled", "disabled"); }); }); </script> </head> <body> <form name="hoge" id="hoge" method="get" action="#"> <p><input class="fuga" type="checkbox" checked> <select name="sel1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p><input class="fuga" type="checkbox" checked> <select name="sel2"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> </form> </body> </html> ※上記ではjQuery1.9.1を利用していますが、1.7以前の場合はonメソッドが使えないと思いますので、bind等で書き直す必要があります。
お礼
こんにちは ご挨拶が遅くなってすみません！ 詳しいご回答ありがとうございます！ 動きました！ ただ、一度チェックが入らないと無効化しないのですが これはチェックなしの状態からにはならないものでしょうか？ 度々すみません（＞＜）