- ベストアンサー
JavaScriptフォームでのラジオボタン制御
- JavaScriptを使用して、ラジオボタンを制御する方法について質問です。
- 右のラジオボタンをクリックした場合に、他のラジオボタンを操作できるようにしたいです。
- 現在のコードでは、右のラジオボタンをクリックすると、他のラジオボタンが無効化されてしまいます。
- embellir_d
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
jqueryのセレクタはidが高速なので、なるべくidを使ってます。 右ラジオボタンにid="rightbtn"をつけます。 ラジオボタンはキーボード操作もあるのでchangeのほうが直感的に良さそう。 checkedの判定はtrue, falseを返すpropを使ってます。 検証してないですが、下記参考までに。 $("[name='sample1']").change(function(){ if($('#rightbtn').prop('checked') ){ $("[name='sample2']").attr("disabled", true); } else { $("[name='sample2']").attr("disabled", false); } });
その他の回答 (2)
- Ogre7077
- ベストアンサー率65% (170/258)
勝手ながら少し手を入れて実現 jQuery 1.7 以上です <script>$(function(){ // 現状を読み取って、下のラジオボタンを操作する function switchEnable(){ var cond = ($('input[name="sample1"]:checked').val() == 'R'); $('input[name="sample2"]').prop('disabled', !cond); } // ページ読み込み後に一回だけ実行 switchEnable(); // 特定の要素が変更される毎に実行 $('input[name="sample1"]').on('change', switchEnable); })</script> <p> <label><input name=sample1 type=radio value=L checked>左ラジオボタン</label> <label><input name=sample1 type=radio value=R>右ラジオボタン</label> <p> <label><input name=sample2 type=radio value=1>1</label> <label><input name=sample2 type=radio value=2>2</label> <label><input name=sample2 type=radio value=3>3</label> <label><input name=sample2 type=radio value=4>4</label>
お礼
早速のご回答感謝致します。 左ラジオボタンにid="leftbtn"と記入し $(function() { $("[name='sample1']").change(function(){ if($('#leftbtn').prop('checked') ){ $("[name='sample2']").attr("disabled", true); } else { $("[name='sample2']").attr("disabled", false); } }); }); 上記のように設定すると出来ました！ 大変助かりました！ ありがとうございます。 ただ、右ラジオボタンに一度チェックを入れてしまいますと 左ラジオボタンにチェックを戻しても 下のボタンが操作可能になってしまいます。 左ラジオボタンにすると完全に下の1～4のボタンを操作出来ないように するにはどうすればいいんでしょうか？ 大変恐縮ですが再度、ご教示して頂けると幸いです。 宜しくお願い致します。