使用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> 

我如何添加attribue到<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>