HTML
1<div class="d-flex align-items-center"> 2 3<div> 4<div id="inputArea" class="d-flex align-items-center"> 5 <textarea class="col-11 mx-auto" type="text" maxlength="50" name="group"></textarea> 6<!-- 小チェックボタン --> 7 <span class="check-area"><input type="checkbox" name="check" value="" class="checkbox" id="checkbox01"><label for="checkbox01" class="checkbox"></label></span> 8</div> 9 <button id="add">+</button> 10</div> 11 12<!-- 大チェックボタン --> 13<span class="check-area-world"><input type="checkbox" name="check" value="" class="checkbox" id="checkbox01"><label for="checkbox01" class="checkbox"></label></span> 14 15</div> 16 17 18
CSS
1 2input { 3 border-radius:4px; 4 box-shadow:0; 5 border:1px solid #ccc; 6} 7 8#inputArea { 9 display:inline-block; 10} 11 12.check-area-world{ 13 padding-left:5px; 14 margin-left: 10px; 15 border-left: 1px solid #000; 16} 17 18.check-area-world input{ 19 width:30px; 20 height:30px; 21} 22 23 24 25.d-block{ 26 display:block; 27} 28.text-right{ 29 text-align:right; 30} 31.d-flex { 32 display: -webkit-box!important; 33 display: -webkit-flex!important; 34 display: -ms-flexbox!important; 35 display: flex!important; 36}
Javascript
1disableButtons(); 2 3$('button').on('click', function() { 4 switch($(this).attr("id")) { 5 case 'add': 6 $('#inputArea').append(createInputWrapper()); 7 break; 8 9 } 10 disableButtons(); 11}); 12 13function createInputWrapper() { 14 return $('<div>').addClass('input-wrapper') 15 .append($('<input>').attr('maxlength', 80)); 16} 17 18function disableButtons() { 19 const inputsCount = $('input').length; 20 if (inputsCount <= 2) 21 $('#delete').prop('disabled', inputsCount === 1); 22 else if (inputsCount >= 4) 23 $('#add').prop('disabled', inputsCount === 5); 24} 25
入力フォームとその右側にある小チェックボタンを1組とする。
プラスボタンを押すともう1組が下に追加される
最大で5組が表示されるまで追加できる。
それらの右側に大きなチェックボックスが1つある。これは常に1つ。
また、5組のうちのチェックボタンが一つでもチェックされると
大きなチェックボックスはグレーアウトして押せなくなる。
逆に、大きなチェックボックスをクリックすると
小さなチェックボックスはグレーアウトして押せなくなる。
この2点を実現したいのです。
ぜひご教授ください。
1.において
プラスボタンを押しても入力フォームだけしか追加されなくて困っています。
「入力フォームと右側に小さなチェックボックス」これをもう1組、
下へ追加するようにしたいです。4回プラスボタンを押すと全部で5組表示されます。
2,において
こちらは現状、何も実現できていません。
実現するにはどのようにすればよいでしょうか。
以上、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/10 12:42
2018/10/10 14:06
2018/10/10 14:30
2018/10/10 23:14