使用jQuery在其td标记中添加一个带有值的属性

Question

我需要帮助为表格中的标记添加属性。

我有一个输出图像的循环复选框。 （见下图）。当用户单击第一个时，它启用应启用下一个复选框。

我希望用户点击第一张图片，而不是第三张图片，依此类推。我不希望用户随机点击任何图像。

如果我摆脱<td>标签，它就有效。所以我的问题是<td>代码

HTML

 <table class="table table-bordered">
   <?php
     $count = 1;
     for($x=0; $x < 5; $x++){
   ?>

   <td>
     <div class="thumb">
       <label for="image <?php echo $count;?>"><img class="img" src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
       <input type="checkbox" class="chk " id="image <?php echo $count;?>" name="tick" value="0" />
     </div>
   </td>

    <?php 
      $count++; }
    ?>

 </table>

的JavaScript

<script>
 $(function() {

 var imageSelector = 'input[type="checkbox"][name="tick"]'; 
 $(imageSelector)
.on('click', function() {
  var $this = $(this);

  if($this.is(':checked')) {
    $this
      .nextAll(imageSelector)
      .first()
      .removeAttr('disabled')
      .removeAttr('checked');
    return;
  }

  $this
    .nextAll(imageSelector)
    .attr('disabled', 'disabled')
    .removeAttr('checked');
})
.attr('disabled', 'disabled')
.removeAttr('checked')
.first().removeAttr('disabled');

});
</script>

如何添加<td>代码的归属

Answer 1

如果我理解正确的话，这是我的版本。

PS：我建议您在ID中没有空格

$(function() {

  var imageSelector = 'input[type="checkbox"][name="tick"]';
  $(imageSelector).on('click', function() {
      var $this = $(this);
      if (this.checked) {
        $this.closest("td").next("td")
          .find(imageSelector)
          .prop('disabled', false)
          .prop('checked', false);
      } else { // uncheck and disable the following checkboxes
        $this.closest("td").nextAll("td").each(function() {
          $(this).find(imageSelector)
            .prop('disabled', true)
            .prop('checked', false);
        });
      }
    })
    .prop('disabled', 'disabled')
    .prop("checked", false)
    .first().prop('disabled', false);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <td>
      <div class="thumb">
        <label for="image1"><img class="img" 
   src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
        <input type="checkbox" class="chk " id="image1" name="tick" value="0" />
      </div>
    </td>
    <td>
      <div class="thumb">
        <label for="image2"><img class="img" 
   src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
        <input type="checkbox" class="chk " id="image2" name="tick" value="0" />
      </div>
    </td>
    <td>
      <div class="thumb">
        <label for="image3"><img class="img" 
   src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
        <input type="checkbox" class="chk " id="image3" name="tick" value="0" />
      </div>
    </td>
    <td>
      <div class="thumb">
        <label for="image4"><img class="img" 
   src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
        <input type="checkbox" class="chk " id="image4" name="tick" value="0" />
      </div>
    </td>
    <td>
      <div class="thumb">
        <label for="image5"><img class="img" 
   src="http://s5.tinypic.com/30v0ncn_th.jpg"/></label>
        <input type="checkbox" class="chk " id="image5" name="tick" value="0" />
      </div>
    </td>
  </tr>
</table>