チェックボックスにチェックを入れたらボタンが活性化する JavaScript

まあ、よくあるプログラムですが。

なんかに同意する意味でチェックボックスをチェックすることで、次のページに進むためのボタンが活性化し押せるようになる・・・って画面、よくありますな。あれ。

まあ、全然難しい話ではなくて、

JavaScript

<script type="text/javascript">
  function checkValue(fname, cbox, target){
    var check = document.forms[fname].elements[cbox];
    var btn = document.forms[fname].elements[target];

    if (check.checked) {
      btn.removeAttribute('disabled');
    }
    else {
      btn.setAttribute('disabled', 'disabled');
    }
  }
</script>

Form

<form id="form1">
  <input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい?<br>
  <br>
  <input id="btn" type="button" value="あれを更新するよ" disabled="disabled">
</form>

て感じで OK。

最初は disabled 属性に disabled を指定しているので「非活性」の状態で、同意のチェックをしたら、disabled 属性を空にして「活性化」すると。

ただ、現在使っているフレームワークは JavaServer Faces (JSF) で、input タグは h:commandButton タグで設定するんだけど、なんか、disabled 属性が無視されるんですけど?(^^;

<h:commandButton type="submit" id="btn" value="次へ"  省略 disabled="disabled" />

みたいに設定してても、実際吐き出された input タグには disabled 属性が含まれていないという・・・
JSF はほとんど経験ないのでわかんないんだけど、でも、ググってみると h:commandButton タグに disabled 属性は存在するみたい。うーん、謎。なんか環境がカスタマイズされているのかね?今回、その辺の環境がわかる人が近くにいないので、別のやり方で対応。

まあ、やり方は色々あるわけで。

JavaScript

<script type="text/javascript">
  function init(){
    var btn = document.forms['form1'].elements['btn'];
    btn.disabled = true;
  }

  function checkValue(fname, cbox, target){
    var check = document.forms[fname].elements[cbox];
    var btn = document.forms[fname].elements[target];

    if (check.checked) {
      btn.disabled = false;
    }
    else {
      btn.disabled = true;
    }
  }
</script>

Form

<form id="form1">
  <input id="initFlg" type="hidden" value="1">
  <input id="check" type="checkbox" onclick="checkValue('form1', 'check', 'btn')"> あれを更新してもいい?<br>
  <br>
  <input id="btn" type="button" value="あれを更新するよ">
</form>

として、<body onload="init()"> で画面が表示された最初に1回だけ init 処理を実行する。
その処理で、ボタンを非活性にしているのであります。

もともと、desabled="disabled" という記述が input タグになければ setAttribute などのメソッドは使えないので、input タグの disabled というプロパティを操作している。true(非活性)か false(活性)をセットしているのだね。

最初の案より、init 処理が増えているだけ、ちょっと面倒かな。

いやあ、しかし、h:commandButton タグに disabled 属性が無視されるのは何でなんだろう。

識者の方、ご教授いただければ幸いです。
Clip to Evernote

トラックバック(0)

このブログ記事を参照しているブログ一覧: チェックボックスにチェックを入れたらボタンが活性化する JavaScript

このブログ記事に対するトラックバックURL: http://blog.netandfield.com/mt/mt-tb.cgi/4849

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、shinodaが2018年5月15日 09:40に書いたブログ記事です。

ひとつ前のブログ記事は「カラス駆除。今回も収穫ゼロ(^^;;」です。

次のブログ記事は「「鉄華」で「阿部勘」と「雨後の月」を味わう」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら