こんにちは！おにぎりちゃんですよ＼(^o^)／
今回もよろしくお願いします＼(^o^)／！！
 
 
さて今回はボタンの無効化について書いていこうと思います。

 
投稿の即時反映の記事の中で商品詳細画面での必要な処理について書いたのですが、
その中のひとつにレビューの表示がありました。
 
レビューの表示の要件として見た人がGOODボタン・BADボタンでレビューの評価ができなければなりませんでした。
 
評価ができなければいけないということは、ボタンを押した後テーブル内の数値を更新するようにしてあげれば良いですよね。
 

var sqlGood = "UPDATE product_review SET good = good + 1 WHERE user_id = (ユーザID) AND product_id = (商品ID) " ;
var resGood = tdb.execute(sqlGood);

var sqlBad = "UPDATE product_review SET bad = bad + 1 WHERE user_id = (ユーザID) AND product_id = (商品ID) " ;
var resBad = tdb.execute(sqlBad);

 
 
しかし、これだけでは何回もレビュー評価ができてしまいますね……
 
 
ここで登場するのがdisabled属性です。
 
 
ボタンや入力フォーム等をユーザが操作できないように無効化することができます。
disabledはhtml内で使用される要素になるので、下記のように書いてあげます。
 

<imart type="submit" name="good" value="" disabled />
<imart type="submit" name="bad" value="" disabled />

 
これでボタンの無効化ができました！！！！！わーい(*´▽｀*)！
 
しかし、ここでまた問題が起こることに気が付きましたでしょうか…
 
 
 
これではページを開いた時点でボタンが押せなくなっていないか！？
 
 
 
これではレビューの評価ができるという要件を満たすことができていません。
では、どうすればボタンを押した後に無効化することができるのでしょうか。
 
調べてみたところ、disabledは属性値をboolean型で指定することにより無効有効を切り替えることができるそう。
つまり！trueである場合は無効、falseである場合は有効とすることができるわけです。
 
今回の研修課題の中ではどちらかボタンを押したときだけtrueになるようにフラグを立てて判別させるようにしました。
 

goodDisabledFlg = false;
badDisabledFlg = false;
if( goodボタン押下時 || badボタン押下時 ){
　goodDisabledFlg = true;
　badDisabledFlg = true;
}

 
あとはHTMLのIMARTタグ内のdisabled属性値に変数名を指定してあげればOKです(^o^)
 

<imart type="submit" name="good" value="" disabled=goodDisabledFlg />
<imart type="submit" name="bad" value="" disabled=badDisabledFlg />

 
こうすればボタンが押されるまではdisabled=falseとなるのでボタンは有効なままページを開くことができ、
GOODボタン・BADボタンどちらかが押されたときに両方無効にすることが可能となります。
 
 
 
しかしここでまた違う問題が発生してしまうのですが、それについては次回書いていきたいと思います！