チェックボックスの状態とテキストフィールド等の連動

質問

分かりにくいタイトルですいません；下のようなフォームがあるとします。
[チェックボックス][テキストフィールド][プルダウンメニュー]
それで、このチェックボックスをオフにすると左側のテキストフィールドとプルダウンメニューの両方を無効にできるようにしたいのです。お分かりの方、ぜひご伝授願います。

回答No.4

chanfi

＞#2さんのサンプルのように、3つのチェックボックスがあるのですが、
＞#1さんと#2さんとでは機能的に違いはありますか？

ほとんど一緒です。
「見た目で分かりやすく」と書いてある通り、
見た目で分かりやすくしただけです。

＞このスクリプト、実行すると「チェックがオン：フォーム無効」になっているんですが、
＞自分は「チェックがオフ：フォーム無効/チェックがオン：フォーム有効」の状態にしたいのです。
＞初心者なので、よろしくお願いします。

if(checkboxObj.checked == true){　←チェックボックスがＯＮだったら
textObj.disabled = true;　←テキストボックスを使用不可
selectObj.disabled = true;　←コンボボックスを使用不可
}else{　←それ以外だったら
textObj.disabled = false;　←テキストボックスを使用可能
selectObj.disabled = false;　←コンボボックスを使用可能
}

という風にしましたので、反対にする方法はご自身で考えてみてください。

＞まだまだサンプル頼りの初心者ですので、どうかよろしくお願いします。

サンプルをいろいろいじくったり、検索サイトで検索してみたりして、
どのコードがどんな働きをしているのか等、いろいろ調べてみると良いかと思います。

今回、#3(#1)さんが簡潔なコードを作ってくださいましたが、
「これは良いものを作ってもらった！コピペでさっそく使ってみよう！」ではなく、
それぞれどんな意味があるかを調べておくと、今後役に立ってくるかと思います。

0から覚えるのは大変かと思いますが、がんばってください。

回答No.3

yambejp

じゃ、こんなふうにセットになっているくくりをdivで囲ってやるといいですよ。

<script>
function func(obj){
var p=obj.parentNode;
ns=obj;
while(ns=ns.nextSibling){
if(ns.type!=undefined) ns.disabled=!obj.checked;
}
}
</script>
<form>
<div>
<input type="checkbox" onClick="func(this)" checked>
<input type="text" name="text1">
<select name="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div>
<input type="checkbox" onClick="func(this)" checked>
<input type="text" name="text2">
<select name="select2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div>
<input type="checkbox" onClick="func(this)" checked>
<input type="text" name="text3">
<select name="select3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>

回答No.2

chanfi

見た目で分かりやすくするならこんな感じですかね。

【javascript】
function closeOpen(number){
checkboxId = "checkbox" + number;
textId = "text" + number;
selectId = "select" + number;
checkboxObj = document.getElementById(checkboxId);
textObj = document.getElementById(textId);
selectObj = document.getElementById(selectId);
if(checkboxObj.checked == true){
textObj.disabled = true;
selectObj.disabled = true;
}else{
textObj.disabled = false;
selectObj.disabled = false;
}
}

【html】
<input type="checkbox" onClick="closeOpen(1)" id="checkbox1">
<input type="text" id="text1">
<select id="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<input type="checkbox" onClick="closeOpen(2)" id="checkbox2">
<input type="text" id="text2">
<select id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<input type="checkbox" onClick="closeOpen(3)" id="checkbox3">
<input type="text" id="text3">
<select id="select3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

idと引数を連番にしようすることで、項目を増やすこともできます。
ご参考までに。

お礼

このスクリプト、実行すると「チェックがオン：フォーム無効」になっているんですが、自分は「チェックがオフ：フォーム無効/チェックがオン：フォーム有効」の状態にしたいのです。初心者なので、よろしくお願いします。

補足

#2さんのサンプルのように、3つのチェックボックスがあるのですが、#1さんと#2さんとでは機能的に違いはありますか？

回答No.1

yambejp

たとえばこんな感じ。

どれを無効にしてどれを無効にしないかは、ifのところを工夫してください
<script>
function func(obj){
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i]!=obj && f[i].type!="submit"){
f[i].disabled=!obj.checked;
}
}
}
</script>
<form>
<input type="checkbox" checked onchange="func(this)">
<input type="text">
<select>
<option>test</option>
<option>test</option>
<option>test</option>
</select>
<input type="submit" value="go!">
</form>

補足

また#2さんに補足です。一つのグループ（？）に二つ以上同じパーツ（テキストボックスが二つなど）があると片方しか有効・無効が切り替わらず、他は無反応です。ずうずうしい話ですが、#2さんの回答の方にも書きました両方を修正してもらえるととても嬉しいです。まだまだサンプル頼りの初心者ですので、どうかよろしくお願いします。