質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

173閲覧

jQueryで場合分けしたい。

s_diff

総合スコア107

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/08/10 03:30

編集2018/08/10 08:16

Ruby On Railsでフォームを作っています。
オプション項目のチェックボックスにチェックが入っている場合は通常どおりフォームを送信できて、
入っていない場合はオプションを勧めるモーダルウィンドウを表示したいです。

以下の実装では、オプション項目にチェックが入っていない場合に問題なくモーダルウィンドウを表示させることはできますが、
チェックが入っている場合にもモーダルウィンドウが表示されてしまいます。

ruby

1# _form.html.erb 2 3<%= form_for(@request) do |f| %> 4 <label>オプション</label> 5 <%= f.check_box :option_flg, id: "request_option_flg", as: :boolean %> 6 <label class="option-service" for="request_option_flg">オプションを利用する</label> 7 <div class='submitbtn' id="show-modal-opt-link">依頼する</div> 8 <%= render 'optiondialog' %> 9<% end %>

javascript

1#common.js 2 3function() { 4 5 function showModal(event) { 6 event.preventDefault(); 7 8 var $modalWin = $('#modalwin'); 9 var $window = $(window); 10 var posX = ($window.width() - $modalWin.outerWidth()) / 2; 11 var posY = ($window.height() - $modalWin.outerHeight()) / 2; 12 13 $modalWin 14 .css({left: posX, top: posY}) 15 .addClass('show') 16 }); 17 } 18 19 function transmissionWithoutOption() { 20 $('#show-modal-opt-link').remove(); 21 $('#submit-request-btn').remove(); 22 return $('.request_actions3').append('<input type="submit" name="commiteee" value="依頼する" class="submitbtn" style="line-height: 22px;" id="submit-request-btn" data-disable-with="依頼中...">'); 23 } 24 25 if ($('#request_option_flg').prop('checked') == true) { 26 $('#show-modal-opt-link').on('click', transmissionWithoutOption); 27 } else { 28 $('#show-modal-opt-link').on('click', showModal); 29 } 30}

チェックが入っているか否かの分岐のところでなにか問題があると思うのですが、なにが問題なのかわかりません。
ご指摘いただけることがあれば、何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/08/10 07:18

チェックの判定がcommon.jsが読み込まれたときになっていますが、正しい仕様でしょうか?
s_diff

2018/08/10 07:23

ご回答ありがとうございます。まさしくそこに問題があると思っています。チェックをつけたと同時に動作を分岐させる方法があるのでしょうか?
guest

回答1

0

ベストアンサー

クリック後判定でいいかと

JavaScript

1 $('#show-modal-opt-link').on('click', function(event) { 2 if ($('#request_option_flg').prop('checked')) { 3 return transmissionWithoutOption(event); 4 } 5 6 return showModal(event); 7 });

投稿2018/08/10 07:28

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_diff

2018/08/10 08:40 編集

ご指摘の実装で試してみましたが、やっぱりチェックをつけてもウィンドウが表示されてしまいます。 transmissionWithoutOptionメソッドに問題があるのでしょうか? function transmissionWithoutOption() { $('#show-modal-opt-link').remove(); $('#submit-request-btn').remove(); return $('.request_actions3').append('<input type="submit" name="commiteee" value="依頼する" class="submitbtn" style="line-height: 22px;" id="submit-request-btn">'); }
x_x

2018/08/10 08:17

コピペミスかもしれませんが、微妙に入れ子がおかしいところがあるので(.addClass('show')の下の行の「});」など)気を付けてみてください。
s_diff

2018/08/21 08:34

返信がおくれて申し訳ありません。 ご指摘のとおり修正したところ、うまく条件分岐できました。 とても助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問