如果选中复选框，则仅允许检查下一个复选框

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＆＃39; s。在最后一个是一个复选框。

我大概做了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仅允许检查NEXT复选框。所有其他残疾人。当我检查下一个时，必须允许检查下一个。

我试过这个

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

但是我没有得到它的工作..我也试过＆＃39; .next＆＃39; ... 有人可以帮忙吗？

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" />

Answer 2

Mohammad's回答似乎不正确。 您可以检查一些复选框，然后从一个复选框中删除检查，而不是最后一次检查，看看会出现什么问题。

此处但是当你取消选中一个复选框时，那之后的所有复选框都将被取消。

如果您想取消选中其余部分，请使用注释部分。

＆＃13;

＆＃13;

var fields = $(".fields");
fields.change(function() {
  Array.prototype.reduce.call(fields, function(prev, curr) {
    curr.disabled = !prev.checked || prev.disabled;

    /*
      If you want to uncheck remianing use this instead of above line:
      curr.checked = prev.checked ? curr.checked : false;
      curr.disabled = !prev.checked;
    */
    return curr;
  });
});

fields.change();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

最后出现正确的答案（似乎是选定的答案：））：

＆＃13;

＆＃13;

$("tr .fields").change(function() {
  console.clear();
  $('.fields').attr('disabled', false);
  var checkedItems = $(".fields:checked");
  if (!checkedItems.length)
    return;
  var checkedIndices = checkedItems.map(function() {
    return $(this).closest('tr').index();
  });
  var lastInRow = Array.prototype.reduce
    .call(checkedIndices, function(p, c) {
      return (c > p + 1) ? p : c;
    });
  $("tr:gt(" + (lastInRow + 1) + ") .fields")
    .attr("disabled", true);

  /* If you wnat to disable items before last check you can add this*/
  // $("tr:lt(" + (lastInRow) + ") .fields").attr("disabled", true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>
  <tr>
    <td width="8em">
      <input class='fields' type='checkbox'>
    </td>
    <td>This</td>
    <td>is a</td>
    <td>test</td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;