oto-tanblog Written by oto-tan

【javascript】checkboxをボタンで非活性にする【グループ非活性付】

JavaScript

こんにちは。

おとーたんです。

今日はJavaScript(JS)を利用したcheckboxを非活性にする方法を身に付けたので、シェアしたいと思います。

[box01 title=”この記事でわかること”]

  • JSでcheckboxを非活性にする方法
  • グループ単位で非活性にする方法

[/box01]

チェックボックスを非活性にする

今回、checkboxを非活性にしたかったので、調べて作ってみました♪

以下のような機能です。

checkbox


では、コードを見ながら細かく解説していきます。

HTML


<input type="checkbox" id="checkbox" />checkbox
<br>
<input type="button" value="checkboxを非活性にする" id="button" onclick="changeButton();" />

HTMLはid属性を指定したcheckboxとボタンを配置した簡単なコード。

ボタンにid属性があるのは、ボタン内の表示を切り替えるためです。

onclick属性でjavascriptを呼び出しましょう♪

JS


function changeButton(){
  // checkboxのidを取得
  var checkbox = document.getElementById("checkbox");
  // ボタンのidを取得
  var button = document.getElementById("button");

  if(checkbox.disabled == true){
    // 活性(Enable)に設定
    checkbox.disabled = false;
    // ボタンの表示項目を変える
    button.value = "checkboxを非活性にする";
  }else{
    // 非活性(Disable)に設定
    checkbox.disabled = true;
    // ボタンの表示項目を変える
    button.value = "checkboxを活性にする";
  }
}

JSはHTMLで指定したidを元に、checkboxの非活性と、ボタンの表示を切り替える機能を実装。

checkboxのidとボタンのidを取得します。

checkboxのidを利用してcheckboxが活性のときは非活性に。

非活性のときは活性にする記述をif文を使用して書きます。

ボタンのidはcheckboxが非活性になったときは「checkboxを活性にする」と切り替わるようにし、活性になったときは「checkboxを非活性にする」と切り替わるようにしましょう♪

チェックボックスをグループ単位で非活性にする

実際に自分がやりたかったのは複数のcheckboxを非活性にすること。

しかも、以下のようなグループ単位で切り替えられる機能です。

group1 group2 group3
group1 group2 group3
group1 group2 group3
  • ボタン



  • ラジオボタン
  • group1を非活性にする
    group2を非活性にする
    group3を非活性にする

  • セレクトボックス


こちらも、コードを見ながら細かく解説していきます。

HTML


<form name="form1">
  <table style="width: 100%;">
    <tbody>
      <tr>
        <td><input type="checkbox" value="group1" name="group1" />group1</td>
        <td><input type="checkbox" value="group2" name="group2" />group2</td>
        <td><input type="checkbox" value="group3" name="group3" />group3</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="group1" name="group1" />group1</td>
        <td><input type="checkbox" value="group2" name="group2" />group2</td>
        <td><input type="checkbox" value="group3" name="group3" />group3</td>
      </tr>
      <tr>
        <td><input type="checkbox" value="group1" name="group1" />group1</td>
        <td><input type="checkbox" value="group2" name="group2" />group2</td>
        <td><input type="checkbox" value="group3" name="group3" />group3</td>
      </tr>
    </tbody>
  </table>
</form>
<br>
<p>ボタン</p>
<!-- onclick属性に記載したJSの呼び出しに「this.id」を引数に指定すると、その要素のidを引数にして渡すことができる -->
<input type="button" value="group1を非活性にする" id="group1" onclick="changeButton(this.id);" />
<br>
<input type="button" value="group2を非活性にする" id="group2" onclick="changeButton(this.id);" />
<br>
<input type="button" value="group3を非活性にする" id="group3" onclick="changeButton(this.id);" />
<br>
<p>ラジオボタン</p>
<!-- onclick属性に記載したJSの呼び出しに「this」を引数に指定すると、その要素ごと引数にして渡すことができる -->
<input type="radio" name="radio" value="group1" onclick="changeRadio(this);" />group1を非活性にする
<br>
<input type="radio" name="radio" value="group2" onclick="changeRadio(this);" />group2を非活性にする
<br>
<input type="radio" name="radio" value="group3" onclick="changeRadio(this);" />group3を非活性にする
<br>
<p>セレクトボックス</p>
<!-- onChange属性も同様に、記載したJSの呼び出しに「this.value」を引数に指定すると、その要素のvalueを引数にして渡すことができる -->
<select onChange="changeSelect(this.value);">
  <option>---グループを選択---</option>
  <option value="group1">group1</option>
  <option value="group2">group2</option>
  <option value="group3">group3</option>
</select>

HTMLはcheckboxの情報をすべて取得できるように、formの中にcheckboxを記載。

今回はグループで非活性にするので、idではなくname属性を指定しました♪

そして、非活性にする方法は

ボタン グループごとに活性、非活性を切り替える
ラジオボタン 選択したグループだけ非活性になる
セレクトボックス 選択したグループだけ非活性になる

の3つで実装。

JS(ボタン)


function changeButton(name){
  // 引数で渡ってきた要素でcheckboxのname属性を取得
  var checkbox = document.getElementsByName(name);
  // ボタンのidを取得
  var button = document.getElementById(name);
  // name属性は配列に格納されているため、for文で順に非活性にする
  for (var i = 0; i < checkbox.length; i++) {
    if(checkbox[i].disabled == true){
      // 活性(Enable)に設定
      checkbox[i].disabled = false;
      // ボタンの表示項目を変える
      button.value = name + "を非活性にする";
    }else{
      // 非活性(Disable)に設定
      checkbox[i].disabled = true;
      // ボタンの表示項目を変える
      button.value = name + "を活性にする";
    }
  }
}

ボタンは「チェックボックスを非活性にする」の実装をグループに対応させただけです。

ボタンのidから非活性にするname属性を取得し、for文で非活性にします。

ボタンのidを取得しているので、同時にボタンの表示も変更。

非活性にしたいcheckboxだけ活性、非活性の切り替えが行えます♪

JS(ラジオボタン)


function changeRadio(name){
  // 引数で渡ってきた要素のvalueを指定してcheckboxのname属性を取得
  var checkbox = document.getElementsByName(name.value);
  // radioボタンの要素を取得
  var radio = document.getElementsByName("radio");
  // formの要素を取得
  var all_disabled = document.forms.form1.elements;
  // すでにチェックが入っているradioボタンのチェックをはずす
  for (var j = 0; j < radio.length; j++) {
    if (!radio[j].value == "group" + j) {
      radio[j].checked = false;
      radio[j].value = "group" + j;
    }
  }
  // 一度すべてのcheckboxを活性化
  for (var i = 0; i < all_disabled.length; i++) {
    if (all_disabled[i].disabled = true) {
      all_disabled[i].disabled = false;
    }
  }
  // 非活性(Disable)に設定
  for (var k = 0; k < checkbox.length; k++) {
    checkbox[k].disabled = true;
  }
}

ラジオボタンのvalueから(idに変更しても可能)、非活性にするname属性を取得します。

ラジオボタンは一度選択するとチェックがついたままになるので、同時にradioボタンの要素も取得し、すでにチェックが入っているradioボタンのチェックをはずしましょう。

そして、このままだとcheckboxの非活性もそのままとなってしまうので、formの要素を取得して、一度すべてのcheckboxの非活性を解除。

その後、取得したname属性を使用して、checkboxを非活性にします。

すると、選択するたびに非活性になるcheckboxが切り替わる、ラジオボタンが完成♪

JS(セレクトボックス)


function changeSelect(name){
  // 引数で渡ってきた要素でcheckboxのname属性を取得
  var checkbox = document.getElementsByName(name);
  // formの要素を取得
  var all_disabled = document.forms.form1.elements;
  // 一度すべてのcheckboxを活性化
  for (var i = 0; i < all_disabled.length; i++) {
    if (all_disabled[i].disabled = true) {
      all_disabled[i].disabled = false;
    }
  }
  // 非活性(Disable)に設定
  for (var j = 0; j < checkbox.length; j++) {
    checkbox[j].disabled = true;
  }
}

セレクトボックスのvalueから(idに変更しても可能)、非活性にするname属性を取得します。

ラジオボタンと同様に、checkboxの非活性もそのままとなってしまうので、formの要素を取得して、一度すべてのcheckboxの非活性を解除。

その後、取得したname属性を使用して、checkboxを非活性にします。

すると、選択するたびに非活性になるcheckboxが切り替わる、セレクトボックスが完成♪

まとめ

checkboxだけでなく、テキストボックスなどにも適用できるので、いろいろアレンジしてみてください♪

ご指摘、ご要望などがあればどしどしお願いいたしますm(__)m