javascript - 如果复选框被选中，则只允许下一个复选框被选中

Question

我用 php 函数制作了一个表

<table width='400' border='0' cellpadding='2' cellspacing='0' id='booking'>
<tr>
    <th width='150' align='left'>Start</th>
    <th width='150' align='left'>End</th>
    <th width='150' align='left'></th>
    <th width='20' align='left'>reserv</th>         
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>

最后我用时间和日期制作了TD。最后是一个复选框。

这个我做了大约10次:

<tr>
    <td>" . $start . "</td>\r\n
    <td>" . date("H:i:s", $finish_time) . "</td>\r\n
    <td>" . $this->cost_currency_tag . number_format($this->cost_per_slot, 2) . "</td>
    <td width='110'>
        <input data-val='".$start."-".date("H:i:s", $finish_time)."' class='fields' type='checkbox'>
    </td>
</tr>";

当我检查复选框时，jquery 只允许检查下一个复选框。所有其他禁用。当我检查下一个时，必须允许检查下一个。

我已经尝试过这个

$('.fields input[type=checkbox]').click(function(){
    var obj = $(this).siblings('input[type=text]');
    obj.attr('disabled', !obj.attr('disabled'));
})

但我没有让它工作..我也尝试过“.next”...有人可以帮忙吗？

Answer 1

使用此代码

$(".fields").change(function(){
    var index = $(this).index() + 1;
    $(".fields").attr("disabled", true);  
    $(".fields:lt("+ index +")").attr("disabled", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="fields" />
<input type="checkbox" class="fields" />
<input type="checkbox" class="fields" />
<input type="checkbox" class="fields" />
<input type="checkbox" class="fields" />