入力フォームについてチェックボックスをチェック済みかつinputタグを入力して初めて送信ボタンを選択可能にする方法を知りたいです。
html構成は以下の通りです。
<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<p><input type="checkbox" id="check"><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label></p>
<input type="submit" id="submit" value="Submit">
チェックボックスのみ入力のみの処理は分かったのですが、両方を満たす場合の条件の処理がわからない状態です。
▼チェックボックスのみ
$(function() {
$('#submit').prop('disabled', true);
$('#check').on('click', function() {
if ($(this).prop('checked') == false) {
$('#submit').prop('disabled', true);
} else {
$('#submit').prop('disabled', false);
}
});
});
▼入力のみ
$(function() {
$('#submit').prop('disabled', true);
$('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
if ($(this).val().length > 0) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
});
});
また可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。
当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。
追記=============================
disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました。
ただ、#submitのvalueとclassの切り替え方法がわかりません。
現在以下の記述を試しているのですがinput入力の有無での切り替えがうまくいかない状態です。
この点もご教授頂けば幸いです。
$(function() {
var flag = 0b11;
$('#submit').prop('disabled', flag);
$('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
$('#submit').addClass("disabled");
$('#check').on('click', function() {
if ($(this).prop('checked') == false) {
$('#submit').prop('disabled', flag = flag | 0b10);
$('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
$('#submit').addClass("disabled");
$('#submit').removeClass("abled");
} else {
$('#submit').prop('disabled', flag = flag & 0b01);
$('#submit').attr({"value":"登録する"});
$('#submit').addClass("abled");
$('#submit').removeClass("disabled");
}
});
$('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
if ($(this).val().length > 0) {
$('#submit').prop('disabled', flag = flag & 0b10);
$('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
$('#submit').addClass("disabled");
$('#submit').removeClass("abled");
} else {
$('#submit').prop('disabled', flag = flag | 0b01);
$('#submit').attr({"value":"登録する"});
$('#submit').addClass("abled");
$('#submit').removeClass("disabled");
}
});
});
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
チェックボックスの場合、<input type="checkbox" required>
とすれば、(iOSなど一部非対応ブラウザはありますが)「チェックを付けなければ送信しない」というのを、JavaScriptなしで実装できます。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+1
$(function() {
var flag = 0b11;
$('#submit').prop('disabled', flag);
$('#check').on('click', function() {
if ($(this).prop('checked') == false) {
$('#submit').prop('disabled', flag = flag | 0b10);
} else {
$('#submit').prop('disabled', flag = flag & 0b01);
}
});
$('#text').on('keydown keyup keypress change', function() {
if ($(this).val().length > 0) {
$('#submit').prop('disabled', flag = flag & 0b10);
} else {
$('#submit').prop('disabled', flag = flag | 0b01);
}
});
});
https://jsfiddle.net/s54y6fcr/
コメントを受けて追記
$(function() {
function toggleSubmitClass(flag){
$('#submit').prop('disabled', flag);
if (flag){
$('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
$('#submit').addClass("disabled");
$('#submit').removeClass("abled");
}else{
$('#submit').attr({"value":"登録する"});
$('#submit').addClass("abled");
$('#submit').removeClass("disabled");
}
}
var flag = 0b11;
toggleSubmitClass(flag);
$('#check').on('click', function() {
if ($(this).prop('checked') == false) {
flag = flag | 0b10;
} else {
flag = flag & 0b01;
}
toggleSubmitClass(flag);
});
$('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
if ($(this).val().length > 0) {
flag = flag & 0b10;
} else {
flag = flag | 0b01;
}
toggleSubmitClass(flag);
});
});
https://jsfiddle.net/s54y6fcr/1/
うーん、とりあえず、ご希望の対応をしてみましたが、#textまわりのイベント処理が微妙だと思いますので、適宜修正してくださいね。
追記
kei344さんのご回答のとおりかと思います。
function ckFlag(){
var flag = $t.add($c.filter(':checked')).map(function(i,e){return $(e).val() || null}).length == $t.length + $c.length ;
toggleSubmitClass( !flag );
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
総当たりで確認する方が早い気もします。
$( function() {
var $s = $( '#submit' ), $c = $( '#check' ), $t = $( '#text1, #text2, #text3' );
function toggleSubmitClass( flag ){
$s.prop( 'disabled', flag );
if ( flag ){
$s.addClass( 'disabled' ).removeClass( 'abled' ).attr( { 'value' : '入力と規約承諾を完了して下さい' } );
}else{
$s.addClass( 'abled' ).removeClass( 'disabled' ).attr( { 'value' : '登録する' } );
}
}
function ckFlag(){
var flag = false;
/*
ここでチェックを確認してだめならtoggleSubmitClassを呼ぶ
*/
/*
ここでテキストを総当たりで確認し、だめなものがあればflag = true;にする
*/
toggleSubmitClass( flag );
}
ckFlag();
$c.on( 'click', ckFlag );
$t.on( 'keydown keyup keypress change', ckFlag );
});
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
ItoTomonori
2016/04/16 10:50
ご自身でどこまで、書かれているのか?そして実際のフォームなど、タグやクラスの構造などが、わからないと、何とも解答できません。
castail
2016/04/16 11:02
失礼いたしました。現状試している内容を追記しました。