- ベストアンサー
2度押し防止のJavascript
- ボタンを押すと出てくる購入リストを連続で押せないようにする
- 連続買いの防止のためのJavascriptの書き方がわからない
- 現状ではボタンの2度押し防止は機能しているが、連続買いができる状態
- tajix14
- お礼率72% (175/242)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すいません、きちんとテストせずに回答してしまいましたね。 結果として、disableするとsubmitで値が送信されないので hidden要素を追加してそこにデータを入れて送信するようにしてはいかがでしょう。 あまりエレガントではないかもしれません。 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <form action="" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button type="submit" name="b100" value="100">100購入</button><br> <button type="submit" name="b200" value="200">200購入</button><br> <button type="submit" name="b300" value="300">300購入</button><br> <button type="submit" name="b400" value="400">400購入</button><br> <button type="submit" name="b500" value="500">500購入</button><br> <button type="submit" name="b600" value="600">600購入</button><br> <button type="submit" name="b700" value="700">700購入</button><br> <button type="submit" name="b800" value="800">800購入</button><br> <input id="data" type="hidden" name="data" value=""> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $('#data').val($(this).val()); //hidden要素のvalueに押下buttonのvalueを挿入 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $("#form1").submit(); }); }); </script> </body> </html>
その他の回答 (2)
- ONEONE
- ベストアンサー率48% (279/575)
どういう動きが正解かわかっていないです。 １００購入、２００購入などのボタンは一つだけ選んだらsubmitで 他のボタンは押せないようにしたい？ でしたら、下記のように $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); > $("button8")としたところ、submitは出来ましたが、連打も出来てしまいます。 クラスのセレクタは$(".button8")とドットが必要です。
お礼
本当にありがとうございます。 初めて「1つのボタンを押すと全体が全ボタンがdisableとなることを経験しました!! 感激しました!」 ただ、大変申し訳ございませんが、その状態ではやはりsubmitができませんでした。 一行づつ消しながらテストした結果が下記のとおりです。 e.preventDefault(); または $("#kai > button").prop("disabled", true); のいずれかの記載があると、submitができないようです。 ****************************************** $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); }); </script> および $("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); Submit 不可 連打不可 ******************************************** $("#kai > button").click(function (e) { e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); }); </script> Submit 不可 連打可 ******************************************* $("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $(this).submit(); //submit }); //$("#kai > button").click(function (e) { //e.preventDefault(); //通常の動作を停止 //$("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 //$(this).submit(); //submit //}); Submit 可 連打可 ******************************************* あと少しのような気がしています。 本当にご迷惑をおかけし大変申し訳ございませんが、あと一声のアドバイスをお願いいたします。
- ONEONE
- ベストアンサー率48% (279/575)
idはひとつの画面でユニークとなるように設定します。 複数の要素で同一のものを使う場合はclassを設定してください。 修正としてはid="b_btn"を消して以下を追加すればよいでしょう。 セレクタはidがkaiである要素の直下にあるbuttonタグを指定しています。 $("#kai > button").click(function (e) { e.preventDefault(); $(this).prop("disabled", true); });
お礼
ありがとうございます。 id="b_btn"を消して下記にしてみました。 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $(this).prop("disabled", true); }); }); </script> 結果としては、submitができませんでした。 試しに<button class="button8" とし、 $("#kai > button") を $("button8")としたところ、submitは出来ましたが、連打も出来てしまいます。 どこか誤りが御座いますでしょうか? 何度もお手数をおかけして申し訳ございません。 よろしくお願いいたします。
お礼
出来ました!! 感激です!! 助かりました!! 本当にありがとうございました!! 感謝です!! <button id="btn0">買い</button> <div id="kai" style="display:none"> <button type="submit" name="volume" value="100">100購入</button><br> <button type="submit" name="volume" value="200">200購入</button><br> <button type="submit" name="volume" value="300">300購入</button><br> <button type="submit" name="volume" value="400">400購入</button><br> <button type="submit" name="volume" value="500">500購入</button><br> <button type="submit" name="volume" value="600">600購入</button><br> <button type="submit" name="volume" value="700">700購入</button><br> <button type="submit" name="volume" value="800">800購入</button><br> </div> <input id="data" type="hidden" name="volume" value=""> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#kai > button").click(function (e) { e.preventDefault(); $('#data').val($(this).val()); //hidden要素のvalueに押下buttonのvalueを挿入 $("#kai > button").prop("disabled", true); //すべての購入ボタンを非活性 $("#form1").submit(); }); }); </script>