Search

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

unknown

サンプルを見る
<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>



選択肢A
選択肢B
選択肢C

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

unknown

サンプルを見る
<script type="text/javascript">
    function fchk3(obj){
        var frm=obj.form;
        var len=frm.elements.length; /* フォームの要素数 */
        if(obj.checked==true){
            /*
                チェックボックスが選択されている場合、
                ラジオボタンを有効化(disabled=false)
            */
            for(var i=0; i<len; i++){
                if(frm.elements[i].type=="radio"){
                    frm.elements[i].disabled=false;
                }
            }
        }else{
            /*
                チェックボックスが選択されていない場合、
                ラジオボタンを無効化(disabled=true)
            */
            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" />選択肢A</label><br>
    <label for="chk3_r2"><input type="radio" id="chk3_r2" name="r1" />選択肢B</label><br>
    <label for="chk3_r3"><input type="radio" id="chk3_r3" name="r1" />選択肢C</label>
</form>



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

unknown

サンプルを見る
<script type="text/javascript">
    function fchk4(obj) {
        var frm=obj.form;
        var len=frm.elements.length; /* フォームの要素数 */
        if(obj.checked==true){
            /* チェックボックスが選択されている場合、
              プルダウンを有効化(disabled=false) */
            frm.elements["sel"].disabled=false;
        }else{
            /* チェックボックスが選択されていない場合、
              プルダウンを無効化(disabled=true) */
            frm.elements["sel"].selectedIndex=0;  /* プルダウン初期化 */
            frm.elements["sel"].disabled=true;
        }
    }
</script>

<form name="form4" action="#">
    <select name="sel">
        <option value="0" selected="selected">▼選択してください</option>
        <option value="1">選択肢A</option>
        <option value="2">選択肢B</option>
        <option value="3">選択肢C</option>
    </select>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk4" onclick="fchk4(this)" checked="checked" />プルダウンの無効化・有効化を切替</label>
</form>

プルダウンで「その他」を選択時、テキストボックス(その他欄)を有効化

unknown

サンプルを見る
<script type="text/javascript">
    function fchk5(obj){
        var frm=obj.form;
        var len=obj.options.length; /* プルダウンの項目数 */
        if(obj.selectedIndex==eval(len-1)){
            /*
                プルダウンで「その他」が選択された時、
                その他入力欄を有効化
            */
            frm.elements["sonota"].disabled=false;
            alert("その他欄に入力してください");
        }else{
            /*
                プルダウンで「その他」以外が選択された時、
                その他入力欄をクリア&無効化
            */
            frm.elements["sonota"].value="";
            frm.elements["sonota"].disabled=true;
        }
    }
</script>

<form name="form5" action="#">
    <select name="sel" onchange="fchk5(this);">
        <option value="0">選択してください</option>
        <option value="1">選択肢A</option>
        <option value="2">選択肢B</option>
        <option value="3">選択肢C</option>
        <option value="4">選択肢D</option>
        <option value="5">その他</option>
    </select> 
    その他欄 <input type="text" name="sonota" size="20" maxlength="256" disabled="disabled" />
</form>
  その他欄

ラジオボタンで選択された項目のみ、テキストボックスを有効化

unknown

サンプルを見る
<script type="text/javascript">
    function fchk6(elm){
        var frm=document.form6;
        if(elm!=6){
            /* 「該当なし」以外のラジオボタンが選択されている場合 */
            if(frm.elements[elm].checked==true){
                for(var i=0; i<=4; i+=2){
                    if(i != elm){
                        frm.elements[eval(i+1)].disabled=true;
                    }
                }
                /* その列のテキストボックスを有効化 */
                frm.elements[eval(elm+1)].disabled=false;
            }
        }else{
            /* 
                「該当なし」が選択されている場合は、
                テキストボックスをクリア&無効化(disabled=true)
            */
            for(var i=0; i<=4; i+=2){
                frm.elements[eval(i+1)].value="";
                frm.elements[eval(i+1)].disabled=true;
            }
        }
    }
</script>

<form name="form6" action="#">
    <ol>
        <li><label for="r6_1"><input type="radio" id="r6_1" name="r6" value="1" onclick="fchk6(0)" />選択肢A</label> <input type="text" name="t1" disabled="disabled" /></li>
        <li><label for="r6_2"><input type="radio" id="r6_2" name="r6" value="2" onclick="fchk6(2)" />選択肢B</label> <input type="text" name="t2" disabled="disabled" /></li>
        <li><label for="r6_3"><input type="radio" id="r6_3" name="r6" value="3" onclick="fchk6(4)" />選択肢C</label> <input type="text" name="t3" disabled="disabled" /></li>
        <li><label for="r6_4"><input type="radio" id="r6_4" name="r6" value="4" onclick="fchk6(6)" />該当なし</label></li>
    </ol>
</form>

チェックボックスで選択された項目のみ、テキストボックスを有効化

unknown

サンプルを見る
<script type="text/javascript">
    function fchk7(obj, idx){
        var frm=document.form7;
        if(!obj.checked){
            /* 入力値をクリア */
            frm.elements["chk"+idx+"_txt"].value="";
            /* チェックされたら、テキストボックスを有効化 */
            frm.elements["chk"+idx+"_txt"].disabled=true;
        }else{
            /* チェックが外されたら、テキストボックスを無効化 */
            frm.elements["chk"+idx+"_txt"].disabled=false;
        }
    }
</script>

<form name="form7" action="#">
    <input type="checkbox" name="chk1" onclick="fchk7(this,1);" />
    <input type="text" name="chk1_txt" disabled="disabled" /><br>
    <input type="checkbox" name="chk2" onclick="fchk7(this,2);" />
    <input type="text" name="chk2_txt" disabled="disabled" /><br>
    <input type="checkbox" name="chk3" onclick="fchk7(this,3);" />
    <input type="text" name="chk3_txt" disabled="disabled" />
</form>


チェックボックスを全選択/全解除

unknown

サンプルを見る
<script type="text/javascript">
    /* チェックボックスの名前で全選択/全解除処理する例 */
    function chkAll_name(bool) {
        var frm=document.form8_1;
        for(var i=1; i<=3; i++) {
            frm.elements["c8_1_"+i].checked=bool;
        }
    }
</script>

<form name="form8_1" action="#">
    <p>
        <input type="button" onclick="chkAll_name(true)" value="全選択" />
        <input type="button" onclick="chkAll_name(false)" value="全解除" />
    </p>
    <p>
        <label for="c8_1_1"><input type="checkbox" id="c8_1_1" name="c8_1_1" />選択肢A</label><br>
        <label for="c8_1_2"><input type="checkbox" id="c8_1_2" name="c8_1_2" />選択肢B</label><br>
        <label for="c8_1_3"><input type="checkbox" id="c8_1_3" name="c8_1_3" />選択肢C</label>
    </p>
</form>

<hr />

<script type="text/javascript">
    /* フォーム全体からチェックボックスだけ全選択/全解除処理をする例 */
    function chkAll_form(bool) {
        var frm=document.form8_2;
        for(var i=0; i<frm.length; i++) {
            if(frm.elements[i].type=="checkbox"){
                frm.elements[i].checked=bool;
            }
        }
    }
</script>

<form name="form8_2" action="#">
    <p>
        <input type="button" onclick="chkAll_form(true)" value="全選択" />
        <input type="button" onclick="chkAll_form(false)" value="全解除" />
    </p>
    <p>
        <label for="c8_2_1"><input id="c8_2_1" name="c8_2_1" type="checkbox" />選択肢A</label><br>
        <label for="c8_2_2"><input id="c8_2_2" name="c8_2_2" type="checkbox" />選択肢B</label><br>
        <label for="c8_2_3"><input id="c8_2_3" name="c8_2_3" type="checkbox" />選択肢C</label>
    </p>
</form>






テキストボックスを入力不可にする

unknown

フォーカスを得た時にフォーカスを外すことで、入力不可にします。
readonlyを指定した時(<input type='text' readonly>)と同じ効果が得られます。

サンプルを見る
<!-- 入力しようとしてもフォーカスが外れて入力不可のテキストボックス -->
<form action="#">
    <input type="text" onFocus="this.blur();" />
</form>

テキストボックスの背反処理

unknown

サンプルを見る
<script type="text/javascript">
    /* 該当なしにチェックしたら、他のチェックを消す */
    function fchk10(elm){
        var frm=document.form10;
        if(elm==3){
            for(var i=0; i<=2; i++){
                frm.elements[i].checked=false;
            }
        }else{
            frm.elements[3].checked=false;
        }
    }
</script>

<form name="form10" action="#">
    <label for="c10_1"><input type="checkbox" id="c10_1" name="c10_1" value="1" onclick="fchk10(0)" />選択肢A</label><br>
    <label for="c10_2"><input type="checkbox" id="c10_2" name="c10_2" value="1" onclick="fchk10(1)" />選択肢B</label><br>
    <label for="c10_3"><input type="checkbox" id="c10_3" name="c10_3" value="1" onclick="fchk10(2)" />選択肢C</label><br>
    <label for="c10_4"><input type="checkbox" id="c10_4" name="c10_4" value="1" onclick="fchk10(3)" />該当なし</label>
</form>



関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop