Javascript 选择选项时选中所选位置的复选框

我有一些复选框。当我选中一个时，选择输入将显示我想要的持续时间。我想要的是，当我选择例如持续时间3小时时，自动选中所选位置的其他2个复选框。例如，我选择12:00，然后显示我的持续时间选择。我选择3小时，它会自动检查其他2小时13:00和14:00

<input class="table" type="checkbox" value="1" id="m1" name="masa[]" class="checkbox"><h4>11:00</h4>
<input class="table" type="checkbox" value="2" id="m2" name="masa[]" class="checkbox"><h4>12:00</h4>
<input class="table" type="checkbox" value="3" id="m3" name="masa[]" class="checkbox"><h4>13:00</h4>
<input class="table" type="checkbox" value="4" id="m4" name="masa[]" class="checkbox"><h4>14:00</h4>
<input class="table" type="checkbox" value="5" id="m5" name="masa[]" class="checkbox"><h4>15:00</h4>
<input class="table" type="checkbox" value="6" id="m6" name="masa[]" class="checkbox"><h4>16:00</h4>
<input class="table" type="checkbox" value="7" id="m7" name="masa[]" class="checkbox"><h4>17:00</h4>
<input class="table" type="checkbox" value="8" id="m8" name="masa[]" class="checkbox"><h4>18:00</h4>
<input class="table" type="checkbox" value="9" id="m9" name="masa[]" class="checkbox"><h4>10:00</h4>
<input class="table" type="checkbox" value="10" id="m10" name="masa[]" class="checkbox">   <h4>20:00</h4>
    <br>
<select class="select_box" style="display:none">
    <option value="1">Duration 1h</option>
    <option value="2">Duration 2h</option>
    <option value="3">Duration 3h</option>
    <option value="4">Duration 4h</option>    
    </select>    

<script type="text/javascript">
    $('input:checkbox').click(function(){
        var $inputs = $('input:checkbox')
            if($(this).is(':checked')){
                $(".select_box").toggle();
               $inputs.not(this).prop('disabled',true); // <-- disable all but checked one
            }else{
               $inputs.prop('disabled',false); // <--
                $(".select_box").hide();
            }
        })
</script>

这是小提琴：

---

希望这对你有帮助

$('input:checkbox').click(function () {
    var i = 0;
    var val = 0;
    var $inputs = $('input:checkbox');
    val = parseInt($(this).next().html());
    if ($(this).is(':checked')) {
        $(".select_box").toggle();
        $('input:checkbox').each(function () {
            if ((i < 2)) {
                if (val < parseInt($(this).next().html())) {
                    $(this).prop('checked', true);
                    i++;
                }
            }
        });
        $inputs.not(this).prop('disabled', true); // <-- disable all but checked one
    } else {
        $inputs.prop('disabled', false); // <--
        $(".select_box").hide();
        $inputs.prop('checked', false);
    }
});

---

哦，好吧，BPT赢了我，但这是我的

---

你的只在第一次点击时起作用，如果我更改持续时间，它不会正常工作。是的，看起来它在FF上起作用，在Chrome上不起作用。现在应该可以工作了，只需将removeProp更改为prop'checked'，false.true，它似乎在FF上起作用，ie不是Chrome:put if$this.is'：disabled'{}就在我之后++

$('.select_box').on('change', function() {
    var val = $(this).val();

    var i = 0;
    var doCheck = false;

    // reset disabled and checked inputs
    $('input:checkbox:disabled:checked').prop('checked', false);

    // check new ones
    $('input:checkbox').each(function() {
        if ($(this).is(':checked')) {
            doCheck = true;
        }

        if (doCheck && i < val) {

            i++;
            $(this).prop('checked', 'checked');
        }
    });
});