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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFに連...
-
JavaScriptでラジオボタンのチ...
-
ラジオボタンの選択で解答・点...
-
tableの任意行にfocusをあてる
-
クリックされた罫表セルの行番...
-
全てのselect要素をデフォルト...
-
プルダウン 項目が多いので先頭...
-
一覧から選択した行の行番号を...
-
submitするとなぜか2度実行する
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
チェックボックス付きのテーブ...
-
チェックボックスにチェックが...
-
複数のプルダウンメニューの表...
-
変数の宣言?
-
リンク先にまで色変更されたま...
-
セレクトボタンで特定の項目で...
-
新規ウインドウから他のページ...
-
クリックさせたいが、click()が...
-
テーブルのサイズを変更するこ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptを使ってラジオボタ...
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
javascript作成してます。ラジ...
-
ラジオボタンにチェックを入れ...
-
ラジオボタン未チェックの場合...
-
チェックされたラジオボタンに...
-
Jvasvriptのlengthで個数が取得...
-
フォームPOST後「戻る」時のチ...
-
データベースの値を判断してラ...
-
チェックボックスのON/OFFに連...
-
ラジオボタンでチェックした項...
-
サイト内にGoogleサイトを表示...
-
JavaScript ラジオボタン デ...
-
ラジオボタンでdisabledとchecked
-
リンク文字クリックでラジオボ...
-
ポップアップウインドウで選択...
-
jQueryで複数のラジオボタンを処理
-
js radioボタンの「name」を多...
-
ラジオボタンとif文
おすすめ情報