當我選擇一個選項時，請從所選位置選中復選框

Question

我有一些復選框。 當我選中一項時，將出現一個選擇的輸入，並顯示我想要的持續時間。 我想要的是，例如當我選擇“持續時間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>

這是小提琴：

jsfiddle

Answer 1

希望這會幫助你。

$('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);
    }
});

Answer 2

哦，好吧，BPT擊敗了我，但這是我的

http://jsfiddle.net/we7GN/2/

$('.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');
        }
    });
});