プログラミング: 2018年5月アーカイブ

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

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

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

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 属性が無視されるのは何でなんだろう。

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

このアーカイブについて

このページには、2018年5月以降に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のアーカイブはプログラミング: 2018年4月です。

次のアーカイブはプログラミング: 2018年6月です。

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


月別 アーカイブ

電気ウナギ的○○ mobile ver.

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