Web Developer's Room
HOME > DHTML サンプル集 > 応用編     

応用編

チェックボックスで選択したグループに入力制限をかける

<html>
<body>

<script language="Javascript">
function Click_Sub1() {
    if (document.all.chk1.checked==true) {
        document.all.t1.disabled=false
        document.all.t2.disabled=false
        document.all.t3.disabled=false
    } else {
        document.all.t1.disabled=true
        document.all.t2.disabled=true
        document.all.t3.disabled=true
    }
}

function Click_Sub2() {
    if (document.all.chk2.checked==true) {
        document.all.c1.disabled=false
        document.all.c2.disabled=false
        document.all.c3.disabled=false
    } else {
        document.all.c1.disabled=true
        document.all.c2.disabled=true
        document.all.c3.disabled=true
    }
}

function Click_Sub3() {
    if (document.all.chk3.checked==true) {
        document.all.r1(0).disabled=false
        document.all.r1(1).disabled=false
        document.all.r1(2).disabled=false
    } else {
        document.all.r1(0).disabled=true
        document.all.r1(1).disabled=true
        document.all.r1(2).disabled=true
    }
}
</script>

<input id="chk1" type="checkbox" onclick="Click_Sub1()" checked>設定1<br>
    <input name="t1" type="text" value="テキスト1"><br>     <input name="t2" type="text" value="テキスト2"><br>     <input name="t3" type="text" value="テキスト3"><br> <p>
<input id="chk2" type="checkbox" onclick="Click_Sub2()" checked>設定2<br>
    <input name="c1" type="checkbox">チェックボックス1<br>
    <input name="c2" type="checkbox">チェックボックス2<br>
    <input name="c3" type="checkbox">チェックボックス3<br>
<p>
<input id="chk3" type="checkbox" onclick="Click_Sub3()" checked>設定3<br>
    <input name="r1" type="radio">ラジオボタン1<br>
    <input name="r1" type="radio">ラジオボタン2<br>
    <input name="r1" type="radio">ラジオボタン3<br>

</body>
</html>

 サンプル




スポンサードリンク


(C) Web Developer's Room All rights reserved.