やりたい事

チェックボックスを一つでも選択したら選択されていないチェックボックスからrequiredを削除してbuttonタグのdisabled属性を書き換えたい。
使用jQuery1.11.1
対応したいIE11
（IE以外のブラウザでの動作は確認済み）

ご回答いただけると幸いです。
よろしくお願いいたします。

JQuery

var checkedsum;

$('.question').on("click",function(){

checkedsum = $('.question:checked').length;
    if( checkedsum > 0 ){
//下記の一文
    $('input[type=checkbox]').not(':checked').prop('required',false);
        $('form[data-validate]').on('input', function () {
            $(this).find('#next').prop('disabled', !this.checkValidity());
        });
    }else{
    $('.question').prop("required",true);
    }
});

HTML

<form method="get" name="pointform" id="checkbox_control" data-validate>
				<div class="s-contents-line">
					<div class="input-item">
						<input type="checkbox" name="point" class="question" value="aa" id="m1" required><label for="m1"><img src="/check/common/img/img_man_1.png" alt=""  class="border"></label>
					</div>
					<div class="input-item">
						<input type="checkbox" name="point" class="question" value="ss" id="m2" required><label for="m2"><img src="/check/common/img/img_man_2.png" alt=""  class="border"></label>
					</div>
				</div>
				<div class="s-contents-line">
					<div class="input-item">
						<input type="checkbox" name="point" class="question" value="dd" id="m3" required><label for="m3"><img src="/check/common/img/img_man_3.png" alt=""  class="border"></label>
					</div>
					<div class="input-item">
						<input type="checkbox" name="point" class="question" value="ff" id="m4" required><label for="m4"><img src="/check/common/img/img_man_4.png" alt=""  class="border"></label>
					</div>
				</div>
				<div class="s-contents-line">
					<div class="input-item">
						<input type="checkbox" name="point" class="question" value="gg" id="m5" required><label for="m5"><img src="/check/common/img/img_man_5.png" alt=""  class="border"></label>
					</div>
					<div class="input-item">
						<div class="input-item">
								<input type="checkbox" name="point" class="question" value="hh" id="m6" required><label for="m6"><img src="/check/common/img/img_man_6.png" alt=""  class="border"></label>
						</div>
					</div>
				</div>
				<div class="s-btn-line">
					<a href="javascript:history.back();"><img src="/check/common/img/return.png" alt=""></a>
					<input type="button" value="次へ" onclick="puff()" id="next" disabled="disabled">
					<div class=""></div>
				</div>
			</form>

退会済みユーザー

2019/11/25 09:16

jQuery のバージョン、及IEのバージョンを明記してください。

backwimps

2019/11/25 09:27

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

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

回答1件

ベストアンサー

javascript
1$(function(){
2  $('[name=point]').on('change',function(){
3    var flg=$('[name=point]:checked').length==0;
4    $('[name=point]').prop('required',flg);
5    $('#next').prop('disabled',flg);
6  });
7});