締切済み

チェックボックスにチェックでプルダウン有効化

2015/01/21 08:31

チェックボックスにチェックを入れると、無効化していたプルダウンが有効化するようなフォームを作りたいと思っています。やりたいことはまさに下記サイトに書かれているとおりなのですが自分でやるとコピペしてもうまく動かず困っています。 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)

2015/01/21 10:35 回答No.1

こんにちは＞何か他に方法があったりするものでしょうか？基本的には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等で書き直す必要があります。

質問者