Question

我有一些复选框。当我检查一个时，选择输入将出现我想要的持续时间。我想要的是，当我选择例如持续时间3小时时，自动检查所选位置的其他2个cheboxes。例如，我选择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');
        }
    });
});

当我选择一个选项时，检查所选位置的复选框

2 个答案: