![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
java script フォームのチェックボックス入力制限について
どなたかお教えください。
以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし)、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。
サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。
よろしくお願いします。
<script type="text/javascript">
function fchk3(obj){
var frm=obj.form;
var len=frm.elements.length;
if(obj.checked==true){
for(var i=0; i<len; i++){
if(frm.elements[i].type=="radio"){
frm.elements[i].disabled=false;
}
}
}else{
for(var i=0; i<len; i++){
if(frm.elements[i].type=="radio"){
frm.elements[i].checked=false;
frm.elements[i].disabled=true;
}
}
}
}
</script>
<form name="form3" action="#">
<label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br />
<label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label>
</form>
No.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>
No.1
- 回答日時:
たとえばチェックボックスの名前を一緒にして、こんな風にやるとどうでしょう?
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
nameにハイフンを入れてラジオ...
-
チェックされたラジオボタンに...
-
htmlのラジオボタンをラベルで...
-
特定のボタンを押すとリンク先...
-
データベースの値を判断してラ...
-
フォームPOST後「戻る」時のチ...
-
チェックボックスとテキストボ...
-
js radioボタンの「name」を多...
-
ラジオボタンでチェックした項...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
Selectボックスの一覧表示方法
-
javaScriptの変数をJavaの変数...
-
Selectボックスの幅を自動で広...
-
【jQuery】input nameの文字列...
-
onchange等のイベントハンドラ...
-
VBSでブラウザ上のテキストボッ...
-
VBSからjavascript
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptを使ってラジオボタ...
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
javascript作成してます。ラジ...
-
ラジオボタンにチェックを入れ...
-
ラジオボタン未チェックの場合...
-
チェックされたラジオボタンに...
-
Jvasvriptのlengthで個数が取得...
-
フォームPOST後「戻る」時のチ...
-
データベースの値を判断してラ...
-
チェックボックスのON/OFFに連...
-
ラジオボタンでチェックした項...
-
サイト内にGoogleサイトを表示...
-
JavaScript ラジオボタン デ...
-
ラジオボタンでdisabledとchecked
-
リンク文字クリックでラジオボ...
-
ポップアップウインドウで選択...
-
jQueryで複数のラジオボタンを処理
-
js radioボタンの「name」を多...
-
ラジオボタンとif文
おすすめ情報