JavaScriptでチェックかつ入力したら有効になるボタンを実装したい

前提・実現したいこと

JavaScriptでチェックかつ入力したら有効になるボタンを実装したいです。

チェックボックス１つ、テキストボックス１つのフォームを作りました。

チェックボックスを選択状態かつテキストボックスに文字を入力したときのみ有効で、片方または両方が選択・未入力の時はボタンが無効になるようにしたいです。

チェックボックスをクリックするときも、文字を入力したときもリアルタイムでボタンの有効・無効が切り替わるようにしたいです。

できれば条件分岐などでフォームは１つを有効無効を切り替えて使用したいです。

よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージは出ていません。
が、動かしてみると挙動がおかしく、片方しか有効になっていないのにボタンが押せたり、チェックボックスも入力もしているのにボタンが無効になっていたり、、といった状態です。

該当のソースコード

checkbox：チェックボックス
Number：テキストボックス
linkBtn：ボタン

JavaScript
1$(function() {
2	$(".linkBtn").prop("disabled", true);
3	
4	$("[name='checkbox']").on('click', function() {
5		if ($("[name='checkbox']").prop('checked')) {
6			$(".linkBtn").prop("disabled", false);
7                        $(".btn").removeClass("disabled");
8
9		} else {
10			$(".linkBtn").prop("disabled", true);
11                        $(".btn").addClass("disabled");
12		}
13	});
14
15	$("[name='Number']").on('keydown keyup keypress change', function() {
16		if ($("[name='checkbox']").val().length > 0) {
17			if($("[name='checkbox']").prop('checked')) {
18				$(".linkBtn").prop("disabled", false);
19                                $(".btn").removeClass("disabled");
20			}else{
21				$(".linkBtn").prop("disabled", true);
22                                $(".btn").addClass("disabled");
23			}
24		}
25		else {
26			if($("[name='checkbox']").prop('checked')) {
27				$(".linkBtn").prop("disabled", false);
28                                $(".btn").removeClass("disabled");
29			}else{
30				$(".linkBtn").prop("disabled", true);
31				$(".btn").addClass("disabled");
32			}
33		}	
34	});
35});

HTML
1<form:form action="/exercise/ex6/" method="post" modelAttribute="entry">
2<div class="checkbox mgt0">
3<label>
4<input type="checkbox" name="checkbox"><b>ようこそ</b>
5<p>Welcome</p>
6</label>
7</div>
8<div class="form">
9<label for="inputId">Number</label>
10<form:input maxlength="5" path="Number" />
11</div>
12<button class="linkBtn btn" type="submit" name="reception">次へ</button>
13</form:form>

補足情報（FW/ツールのバージョンなど）

kei344

2019/11/26 11:14

HTMLも提示してください。

hamuhamukushi

2019/11/27 01:39

失礼いたしました。HTMLを追加しました。

行動規範の内容に同意します

回答2件

自己解決

https://teratail.com/questions/142525?link=qa_related_pc

こちらを参考に、処理に初期値を追加して実装できました。
ありがとうございました。

投稿2019/11/27 09:13

hamuhamukushi

総合スコア7

javascript
1<script>
2$(function(){
3  $('[name=checkbox]').on('change',function(){
4    var flg1=$(this).is(':not(:checked)');
5    var flg2=flg1 || $(this).closest('div').find('[name=Number]').val()=="";
6    $(this).closest('div').find('[name=Number]').prop('disabled',flg1);
7    $(this).closest('div').find('.linkBtn').prop('disabled',flg2);
8  }).trigger('change');
9  $('[name=Number]').on('input',function(){
10    var flg=$(this).val()=="";
11    $(this).closest('div').find('.linkBtn').prop('disabled',flg);
12  });
13});
14</script>
15<div>
16<input type="checkbox" name="checkbox">
17<input type="text" name="Number">
18<input type="button" value="send" class="linkBtn">
19</div>
20<div>
21<input type="checkbox" name="checkbox">
22<input type="text" name="Number">
23<input type="button" value="send" class="linkBtn">
24</div>
25<div>
26<input type="checkbox" name="checkbox">
27<input type="text" name="Number">
28<input type="button" value="send" class="linkBtn">
29</div>