Add an attribute with a value in its td tag with jQuery

Question

I need help with adding an attribute to tag in table.

I have a loop which output an image an checkbox. (see picture below). when user click the first, it enables should enable the next checkbox to be enabled.

I would like user to click first image, than second than third and so on. I do not want user to click any image random.

It works if i get rid of <td> tags. SO my problem is <td> tags

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>

How I can add attribue to <td> tags

Answer 1

Here is my version if I understood you correctly.

PS: I suggest you do not have spaces in the 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>