チェックボックス

###前提・実現したいこと
HTMLとJavascriptを使用して
テキストフィールドに入力した数値分
チェックボックスにチェックを入れたい。
【 3 】件チェック
↑このテキストに3を入れて横の件チェックを押すと
チェックボックスにチェックが入る、
でも、disableになっているものはチェックしないようにしたいです。
☑
☑
☐（disable）
☑
こんな感じで

kaputaros

2016/10/21 07:34 編集

自分でどこまで出来た、どこでつまづいている、付ける順番はこうしたい、すでに付いている場合はどうする、等情報が少ないので、加筆していただきたいです。

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

回答2件

たとえばこんな感じ

javascript
1$(function() {
2  $('input[value=チェック]').on('click',function(){
3    var num=parseInt($('input[name=ch]').val())||0;
4    var selector=$('[type=checkbox]').not(':disabled');
5    selector.each(function(){
6       $(this).prop('checked',selector.index(this)<num);
7    });
8  });
9});
10

HTML
1【<input type="text" name="ch" size="1">】件<input type="button" value="チェック"><br>
2<input type="checkbox">check<br>
3<input type="checkbox">check<br>
4<input type="checkbox" disabled>check disabled<br>
5<input type="checkbox">check<br>
6<input type="checkbox" disabled>check disabled<br>
7<input type="checkbox">check<br>
8<input type="checkbox">check<br>
9<input type="checkbox">check<br>
10

投稿2016/10/21 08:09

yambejp

総合スコア114843

ワンライナーで書いてみました（やめろ）

HTML
1<input id="num" value=""><input id="check" type="button" value="件チェック">
2<input type="checkbox" class="check">
3<input type="checkbox" class="check">
4<input type="checkbox" class="check" disabled="1">
5<input type="checkbox" class="check">

javascript
1document.getElementById('check').addEventListener('click', e=>
2  Array.prototype.slice.call( document.querySelectorAll('.check:not(:disabled)'), 0, document.getElementById('num').value )
3  .forEach( elm=>
4    elm.checked=true
5  )
6);