ﾁｪｯｸﾎﾞｯｸｽにﾁｪｯｸを入れたらﾎﾞﾀﾝが活性化する JavaScript[ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ]
(2018-05-15 09:40:06) by shinoda

< ﾍﾟｰｼﾞ移動: 1 2 >

まあ､よくあるﾌﾟﾛｸﾞﾗﾑですが｡

なんかに同意する意味でﾁｪｯｸﾎﾞｯｸｽをﾁｪｯｸすることで､次のﾍﾟｰｼﾞに進むためのﾎﾞﾀﾝが活性化し押せるようになる･･･って画面､よくありますな｡あれ｡

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

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 処理を実行する｡
その処理で､ﾎﾞﾀﾝを非活性にしているのであります｡

< ﾍﾟｰｼﾞ移動: 1 2 >

ｺﾒﾝﾄ投稿
次の記事へ >
< 前の記事へ
TOPへ戻る

Powered by
MT4i 3.0.8