雑多に技術メモと他色々

主に自分用な技術メモが多くなる気がする。他色々が書かれるかどうかは不明。

ラジオボタンやチェックボックスの選択時にjavascriptを呼び出す

HTML JavaScript jQuery

超久しぶりに更新。
javascriptとしては基礎的な内容だが、使う機会が出たので記録残す。

前提

jQuery使う

呼び出されるjavascriptの内容

テキストinputを作って、その活性/非活性を切り替えてみる。
ラジオボタンなら特定のものが選択された時だけ非活性、チェックボックスならチェックされてる時だけ非活性といった感じ。

実装例

ラジオボタンの実装例

ラジオボタンで特定要素が選択されたら非活性にする実装。

<html lang='ja'>
<meta charset="UTF-8"/>
<title>活性非活性のテスト(ラジオ)</title>
<body>

<script type="text/javascript" src="./jquery-2.2.4.min.js"></script>
<script>
  function setDisable(target){
    $(target).prop("disabled", true);  
  }
  function setEnable(target){
    $(target).prop("disabled", false);  
  }
</script>

<div><input type="radio" name="radio1" value="dummy" onclick="setDisable('#comment1')">活性しないやーつ</div>
<div><input type="radio" name="radio1" value="dummy" onclick="setEnable('#comment1')" checked>活性するやーつ１</div>
<div><input type="radio" name="radio1" value="dummy" onclick="setEnable('#comment1')">活性するやーつ２</div>
<div>ここが切り替わる<input id="comment1" type="text" name="comment" value="初期てきすと" style="width:200px;" maxlength="10"></div>
</body>
</html>

非活性に切り替えたい要素にID振って、ラジオボタンのonclickでそのIDを引数に関数呼び出し。

チェックボックスの実装例

チェックボックスがチェックされたら非活性にする実装。

<html lang='ja'>
<meta charset="UTF-8"/>
<title>活性非活性のテスト(チェックボックス)</title>
<body>

<script type="text/javascript" src="./jquery-2.2.4.min.js"></script>
<script>
  function setDisable(target, isDisable){
    $(target).prop("disabled", isDisable);  
  }
  function isChecked(target){
    return $(target).prop("checked");  
  }
</script>

<div><input id="check1" type="checkbox" name="checked1" onclick="setDisable('#comment1', isChecked('#check1'))">チェックされたら非活性</div>
<div>ここが切り替わる<input id="comment1" type="text" name="comment" value="初期てきすと" style="width:200px;" maxlength="10"></div>
</body>
</html>

切り替えたい要素にID振って、onclickの引数に指定するのはラジオボタンと一緒。
チェックするときも外すときも同じイベント呼び出しになるので、チェックボックス自体にもIDを振ってON/OFFの状態もjsでとる。