※ ChatGPTを利用し、要約された質問です(原文:チェックボックスの無効化、有効化)
チェックボックスの無効化、有効化を実装する方法
このQ&Aのポイント
チェックボックスの無効化、有効化を実装する方法を解説します。name属性に異なる番号を振らずに、同じnameで動作させる方法についても説明します。
チェックボックスの無効化、有効化を実装するには、JavaScriptを使用します。指定したチェックボックスに応じてテキストボックスや他のチェックボックスを無効化、有効化します。
チェックボックスの無効化、有効化の切り替えには、onclickイベントを使用します。チェックボックスが選択されている場合は、関連するテキストボックスやチェックボックスを有効化し、選択されていない場合は無効化します。
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。
ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号(t1、t2、t3やc1、c2、c3)が振られている必要がありますが、
これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか?
nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。
<script type="text/javascript">
function fchk2(obj, name) {
var frm=obj.form;
if(obj.checked==true) {
/*
チェックボックスが選択されている場合は、
テキストボックスを有効化(false)
*/
for(var i=1; i<=3; i++){
frm.elements[name+i].disabled=false;
}
} else {
for(var i=1; i<=3; i++){
/* 無効化する前に、入力値をクリア */
if(name=='t'){
/* テキストボックスの場合 */
frm.elements[name+i].value="";
}else{
/* チェックボックスの場合 */
frm.elements[name+i].checked=false;
}
/* 無効化(true) */
frm.elements[name+i].disabled=true;
}
}
}
</script>
<form name="form2" action="#">
<label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替(チェックを外すと無効化)</label><br />
<input type="text" name="t1" value="テキストA" size="20" />
<input type="text" name="t2" value="テキストB" size="20" />
<input type="text" name="t3" value="テキストC" size="20" />
<hr />
<label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替(チェックを外すと無効化)</label><br />
<input type="checkbox" name="c1" value="1" />選択肢A<br />
<input type="checkbox" name="c2" value="1" />選択肢B<br />
<input type="checkbox" name="c3" value="1" />選択肢C
</form>
お礼
新年早々にご回答頂きありがとうございます。 >getElementsByNameで同一name属性のエレメントを一度に取得できます。 お恥ずかしいのですが、javascriptの知識が全く乏しく、もしよろしければ具体的にどのように書き換えればいいのか、 ソースを教えて頂くことはできませんでしょうか。 よろしくお願いします。