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

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

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

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

jQuery

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

Q&A

解決済

3回答

11243閲覧

チェックかつ入力されたら送信可能にするボタンを実装したい

castail

総合スコア117

JavaScript

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

jQuery

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

1グッド

1クリップ

投稿2016/04/16 01:45

編集2016/04/16 03:04

入力フォームについてチェックボックスをチェック済みかつinputタグを入力して初めて送信ボタンを選択可能にする方法を知りたいです。

html構成は以下の通りです。

lang

1<input type="text" id="text1"> 2<input type="text" id="text2"> 3<input type="text" id="text3"> 4<p><input type="checkbox" id="check"><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label></p> 5<input type="submit" id="submit" value="Submit">

チェックボックスのみ入力のみの処理は分かったのですが、両方を満たす場合の条件の処理がわからない状態です。

▼チェックボックスのみ

lang

1$(function() { 2 $('#submit').prop('disabled', true); 3 $('#check').on('click', function() { 4 if ($(this).prop('checked') == false) { 5 $('#submit').prop('disabled', true); 6 } else { 7 $('#submit').prop('disabled', false); 8 } 9 }); 10});

▼入力のみ

lang

1$(function() { 2 $('#submit').prop('disabled', true); 3 $('#text1,#text2,#text3').on('keydown keyup keypress change', function() { 4 if ($(this).val().length > 0) { 5 $('#submit').prop('disabled', false); 6 } else { 7 $('#submit').prop('disabled', true); 8 } 9 }); 10});

また可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。

当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。

追記=============================
disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました。
ただ、#submitのvalueとclassの切り替え方法がわかりません。
現在以下の記述を試しているのですがinput入力の有無での切り替えがうまくいかない状態です。
この点もご教授頂けば幸いです。

lang

1$(function() { 2 var flag = 0b11; 3 $('#submit').prop('disabled', flag); 4 $('#submit').attr({"value":"入力と規約承諾を完了して下さい"}); 5 $('#submit').addClass("disabled"); 6 7 $('#check').on('click', function() { 8 if ($(this).prop('checked') == false) { 9 $('#submit').prop('disabled', flag = flag | 0b10); 10 $('#submit').attr({"value":"入力と規約承諾を完了して下さい"}); 11 $('#submit').addClass("disabled"); 12 $('#submit').removeClass("abled"); 13 } else { 14 $('#submit').prop('disabled', flag = flag & 0b01); 15 $('#submit').attr({"value":"登録する"}); 16 $('#submit').addClass("abled"); 17 $('#submit').removeClass("disabled"); 18 } 19 }); 20 $('#text1,#text2,#text3').on('keydown keyup keypress change', function() { 21 if ($(this).val().length > 0) { 22 $('#submit').prop('disabled', flag = flag & 0b10); 23 $('#submit').attr({"value":"入力と規約承諾を完了して下さい"}); 24 $('#submit').addClass("disabled"); 25 $('#submit').removeClass("abled"); 26 } else { 27 $('#submit').prop('disabled', flag = flag | 0b01); 28 $('#submit').attr({"value":"登録する"}); 29 $('#submit').addClass("abled"); 30 $('#submit').removeClass("disabled"); 31 } 32 }); 33});
makoto-n👍を押しています

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

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

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

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

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

ItoTomonori

2016/04/16 01:50

ご自身でどこまで、書かれているのか?そして実際のフォームなど、タグやクラスの構造などが、わからないと、何とも解答できません。
castail

2016/04/16 02:02

失礼いたしました。現状試している内容を追記しました。
guest

回答3

0

チェックボックスの場合、<input type="checkbox" required>とすれば、(iOSなど一部非対応ブラウザはありますが)「チェックを付けなければ送信しない」というのを、JavaScriptなしで実装できます。

投稿2016/04/16 02:50

maisumakun

総合スコア145121

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

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

castail

2016/04/16 03:07

ご回答ありがとうございます。 せっかくですが今回iOS必須であるためご教授いただいた内容では条件を満たすことができません。
guest

0

総当たりで確認する方が早い気もします。

JavaScript

1$( function() { 2 var $s = $( '#submit' ), $c = $( '#check' ), $t = $( '#text1, #text2, #text3' ); 3 function toggleSubmitClass( flag ){ 4 $s.prop( 'disabled', flag ); 5 if ( flag ){ 6 $s.addClass( 'disabled' ).removeClass( 'abled' ).attr( { 'value' : '入力と規約承諾を完了して下さい' } ); 7 }else{ 8 $s.addClass( 'abled' ).removeClass( 'disabled' ).attr( { 'value' : '登録する' } ); 9 } 10 } 11 function ckFlag(){ 12 var flag = false; 13 /* 14 ここでチェックを確認してだめならtoggleSubmitClassを呼ぶ 15 */ 16 /* 17 ここでテキストを総当たりで確認し、だめなものがあればflag = true;にする 18 */ 19 toggleSubmitClass( flag ); 20 } 21 ckFlag(); 22 $c.on( 'click', ckFlag ); 23 $t.on( 'keydown keyup keypress change', ckFlag ); 24});

投稿2016/04/16 08:11

kei344

総合スコア69364

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

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

castail

2016/04/18 07:06

ご連絡が遅くなり申し訳ございません。 ご回答ありがとうございます。 ご教授頂いた内容を試したのですがこちらではうまく処理されませんでした。 「Lhankor_Mhy」さんもこちらでうまくいくというご回答だったので、こちら側の記述ミスなどの可能性が高いと思いますので引き続き検証したいと思います。 ただ、今回は解答スピードの速さやご丁寧に複数回ご回答頂いた点、などを踏まえ「Lhankor_Mhy」さんへベストアンサーをつけさせていただきたいと思います。 何卒ご了承ください。
guest

0

ベストアンサー

javascript

1$(function() { 2 var flag = 0b11; 3 $('#submit').prop('disabled', flag); 4 5 $('#check').on('click', function() { 6 if ($(this).prop('checked') == false) { 7 $('#submit').prop('disabled', flag = flag | 0b10); 8 } else { 9 $('#submit').prop('disabled', flag = flag & 0b01); 10 } 11 }); 12 $('#text').on('keydown keyup keypress change', function() { 13 if ($(this).val().length > 0) { 14 $('#submit').prop('disabled', flag = flag & 0b10); 15 } else { 16 $('#submit').prop('disabled', flag = flag | 0b01); 17 } 18 }); 19});

https://jsfiddle.net/s54y6fcr/



#####コメントを受けて追記

javascript

1$(function() { 2 function toggleSubmitClass(flag){ 3 $('#submit').prop('disabled', flag); 4 if (flag){ 5 $('#submit').attr({"value":"入力と規約承諾を完了して下さい"}); 6 $('#submit').addClass("disabled"); 7 $('#submit').removeClass("abled"); 8 }else{ 9 $('#submit').attr({"value":"登録する"}); 10 $('#submit').addClass("abled"); 11 $('#submit').removeClass("disabled"); 12 } 13 } 14 var flag = 0b11; 15 toggleSubmitClass(flag); 16 17 $('#check').on('click', function() { 18 if ($(this).prop('checked') == false) { 19 flag = flag | 0b10; 20 } else { 21 flag = flag & 0b01; 22 } 23 toggleSubmitClass(flag); 24 }); 25 $('#text1,#text2,#text3').on('keydown keyup keypress change', function() { 26 if ($(this).val().length > 0) { 27 flag = flag & 0b10; 28 } else { 29 flag = flag | 0b01; 30 } 31 toggleSubmitClass(flag); 32 }); 33 34});

https://jsfiddle.net/s54y6fcr/1/
うーん、とりあえず、ご希望の対応をしてみましたが、#textまわりのイベント処理が微妙だと思いますので、適宜修正してくださいね。



#####追記
kei344さんのご回答のとおりかと思います。

javascript

1function ckFlag(){ 2 var flag = $t.add($c.filter(':checked')).map(function(i,e){return $(e).val() || null}).length == $t.length + $c.length ; 3 toggleSubmitClass( !flag ); 4}

https://jsfiddle.net/s54y6fcr/3/

投稿2016/04/16 02:20

編集2016/04/16 12:37
Lhankor_Mhy

総合スコア35865

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

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

Lhankor_Mhy

2016/04/16 02:21

あら、質問に追記が…… ロジックは同じことなので、この回答で大丈夫でしょうか?
castail

2016/04/16 03:06

ご回答ありがとうございます。 disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました! 感謝いたします。 ただ、#submitのvalueとclassの切り替え方法がわかりません。 input入力の有無での切り替えがうまくいかない状態です。 現在試している内容を上部「追記」として記述しております。 大変お手数ですが、この点もご教授願えませんでしょうか?
castail

2016/04/16 07:39 編集

ご回答ありがとうございます。 ご教授頂いた内容を試したのですが、チェックボックス選択状態で入力欄1箇所のみ文字を入力すると他の入力欄は空にも関わらず、「disabled」は解除され「value="登録する"」「class="abled"」となります。この状態でも選択不可状態にできないでしょうか? ご回答の程よろしくお願いいたします。
Lhankor_Mhy

2016/04/16 12:38

kei344さんのご回答のとおりかと思います。一例を追記しました。
castail

2016/04/18 07:06

ご連絡が遅くなり申し訳ございません。 ご回答ありがとうございます。 ご教授頂いた内容を再度試したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問