チェックボックスに全てチェックをしたら、ボタンを押せるようにする実装をしたいです。なので、チェック

締切済

質問者：たくあん大好き
質問日時：2020/07/16 21:25
回答数：3件

チェックボックスに全てチェックをしたら、ボタンを押せるようにする実装をしたいです。
なので、チェックする前と、してる最中はボタンは押せないようにし、全てチェックできたら押せるようにしたいです。
Jqueryで書いていきたいのですが、どうやって書いたらよろしいでしょうか。
ご教示お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： yambejp
回答日時：2020/07/20 10:58

<script>

$(function(){
$(':checkbox').on('change',function(){
$('#btn').prop('disabled',$(':checkbox:not(:checked)').length>0);
}).eq(0).trigger('change');

});
</script>
<input id="btn" type="button" value="button">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2020/07/17 14:49

こんにちは

＞全てチェックできたら押せるようにしたいです。
対象とするチェックボックスは存在するもの全部なのか、ある特定のボックス（群）のみなのかなどがよくわかりませんが、とりあえずこんなのでは？

※ ひとまず、.wrap内のcheckbox全部にしてありますが、一部などといった場合は、
　let inps = $('#wrap input[type="checkbox"]');
の部分を、対象とするcheckboxだけ取得するように変えれば、そのままで動作するはずです。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
label { display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script>
$(()=>{
let inps = $('#wrap input[type="checkbox"]');
inps.on('click',()=>{
$('#btn').prop('disabled', inps.filter(':not(:checked)').length);
});
});
</script>
</head>
<body>

<div id="wrap">
<label><input type="checkbox" value="c1" />check1</label>
<label><input type="checkbox" value="c2" />check2</label>
<label><input type="checkbox" value="c3" />check3</label>
<label><input type="checkbox" value="c4" />check4</label>

<button id="btn" type="button" value="b1" disabled>click meee!</button>
</div>
</body>
</html>