oto-tanblog Written by oto-tan

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

JavaScript

こんにちは。
おとーたんです。

普段書いているソシャゲブログで、checkboxの活性/非活性を切り替えて使用する機能を作りたかったので、checkboxの活性/非活性を切り替える機能を簡単に作ってみました。

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

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

簡単には以下のような機能です。

HTML


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

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を活性にする";
  }
}

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

実際に自分がやりたかったのは

  • 複数のcheckboxの活性/非活性をグループ単位で切り替えられる機能

なので、上記機能をグループで切り替えられるような実装を考えて作りました。

イメージこんな感じ。

やりたかったのはセレクトボックスでの活性/非活性の切り替えですが

  • ボタン
  • ラジオボタン
  • セレクトボックス

の3つで実装。

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>

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

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 + "を活性にする";
    }
  }
}

ボタンは非活性にしたい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;
  }
}

ラジオボタンは切り替えるごとに活性/非活性が変わるようにしてみました。
チェックすると非活性になり、他のグループをチェックするとチェックが外れて活性になります。

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;
  }
}

セレクトボックスもラジオボタンと同じように、選択したグループのみが非活性になるようにしました。
セレクトボックスはname属性をid属性に変更しても実装可能です。

まとめ

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

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