- ベストアンサー
JavaScriptフォームのチェックボックス入力制限について
- JavaScriptフォームのチェックボックス入力制限について解説します。
- この記事では、JavaScriptを使用してチェックボックスの入力を制限する方法を紹介します。
- 具体的なコード例を使用して、チェックボックスが選択された場合にラジオボタンを有効にする方法を説明します。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
下のようにグループごとにまとめて同じ<label>内に格納してしまって、 <form name="form3" action="#"> <label for="chk1"> <input type="checkbox" id="chk1" name="chk1" onclick="fchk(this)" checked="checked"> このボタンのチェックを外すとラジオボタンが無効化<br> <label for="chk1_r1"><input type="radio" id="chk1_r1" name="r1">選択肢</label> <label for="chk1_r2"><input type="radio" id="chk1_r2" name="r1">選択肢</label> <label for="chk1_r3"><input type="radio" id="chk1_r3" name="r1">選択肢</label> </label> <br> <label for="chk2"> <input type="checkbox" id="chk2" name="chk2" onclick="fchk(this)" checked="checked"> このボタンのチェックを外すとラジオボタンが無効化<br> <label for="chk2_r1"><input type="radio" id="chk2_r1" name="r1">選択肢</label> <label for="chk2_r2"><input type="radio" id="chk2_r2" name="r1">選択肢</label> <label for="chk2_r3"><input type="radio" id="chk2_r3" name="r1">選択肢</label> </label> <br> <label for="chk3"> <input type="checkbox" id="chk3" name="chk3" onclick="fchk(this)" checked="checked"> このボタンのチェックを外すとラジオボタンが無効化<br> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1">選択肢</label> <label for="chk3_r2"><input type="radio" id="chk3_r2" name="r1">選択肢</label> <label for="chk3_r3"><input type="radio" id="chk3_r3" name="r1">選択肢</label> </label> </form> SCRIPTは下のようにしてはどうでしょう(全角空白は半角空白にして!) <script type="text/javascript"> function fchk(obj){ var input=obj.parentNode.getElementsByTagName("input"); var len=input.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(input[i].type=="radio"){ input[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(input[i].type=="radio"){ input[i].checked=false; input[i].disabled=true; } } } } </script>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばチェックボックスの名前を一緒にして、こんな風にやるとどうでしょう? <script> function checkfunc(obj){ var check_flg=true; var f=obj.form; for (var i=0;i<f.length;i++){ if(f[i].name==obj.name && f[i].checked){ check_flg=false; break; } } for (var i=0;i<f.length;i++){ if(f[i].type=="radio"){ f[i].disabled=check_flg; } } } </script> <form> <input type="checkbox" name="ch[]" onclick="checkfunc(this)" />ch1 <input type="checkbox" name="ch[]" onclick="checkfunc(this)" />ch2 <input type="checkbox" name="ch[]" onclick="checkfunc(this)" />ch3 <input type="radio" name="r1" disabled />ra1 <input type="radio" name="r1" disabled />ra2 <input type="radio" name="r1" disabled />ra3 </form>
お礼
動きました! ありがとうございました ^^