如何根据索引取消选中复选框

Question

How can i uncheck checkbox based on checkbox index. I have tried to following script for uncheck checkbox based on index but it's not doing anything.

$('.change_product_price').each(function(index, element) {
    $(".chkIt").eq(index).prop("checked", false); // first method
    $('.chkIt:checked').eq(index).prop("checked", false); //second method
});

HTML

<tr class="product_row">                                                
    <td class="small-check SerialNumber"><input class="chkIt" type="checkbox" name="products[product_id][]" value="76" qty="0" product_weight="0"></td>
    <td data-th="Product Name" class="fourth_i1">8 PACK SPECIALIST EMBOSSED SILVER FOIL 500 SHEET  BOX 12CM X 20CM</td>
    <td data-th="Part Number" class="grid-text">EMBOSS-Pre-Cut x 8 Pack</td>
    <td class="small-check MarkGift"><input class="chkItg" type="checkbox" name="gift[product_id][]" value="76"></td>
    <td data-th="Quantity" class="grid-text">
        <select name="products[quantity][76][]" class="change_product_price">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>              
        </select>  
        <input type="hidden" class="promo_min_quantity" name="promo_min_quantity" value="">
        <input type="hidden" class="promo_free_units" name="promo_free_units" value="0">                          
    </td>
    <td style="display:none;" class="grid-text"><span class="product_weight">5.8</span></td>
    <td data-th="Price / unit" class="grid-text">$<span class="product_price" prevvalue="180.00">180.00</span></td>
    <td data-th="Promo code" class="grid-text">N/A<!-- <input type="hidden" value="" name="products[promo_code][76][]" />--></td>
    <td data-th="Price" class="grid-text">$<span class="product_total_price">180.00</span></td>

</tr>

<tr class="product_row">                                                
    <td class="small-check SerialNumber"><input class="chkIt" type="checkbox" name="products[product_id][]" value="76" qty="0" product_weight="0"></td>
    <td data-th="Product Name" class="fourth_i1">12 PACK SPECIALIST EMBOSSED SILVER FOIL 500 SHEET  BOX 12CM X 20CM</td>
    <td data-th="Part Number" class="grid-text">EMBOSS-Pre-Cut x 8 Pack</td>
    <td class="small-check MarkGift"><input class="chkItg" type="checkbox" name="gift[product_id][]" value="78"></td>
    <td data-th="Quantity" class="grid-text">
        <select name="products[quantity][78][]" class="change_product_price">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>              
        </select>  
        <input type="hidden" class="promo_min_quantity" name="promo_min_quantity" value="">
        <input type="hidden" class="promo_free_units" name="promo_free_units" value="0">                          
    </td>
    <td style="display:none;" class="grid-text"><span class="product_weight">5.8</span></td>
    <td data-th="Price / unit" class="grid-text">$<span class="product_price" prevvalue="180.00">180.00</span></td>
    <td data-th="Promo code" class="grid-text">N/A<!-- <input type="hidden" value="" name="products[promo_code][78][]" />--></td>
    <td data-th="Price" class="grid-text">$<span class="product_total_price">180.00</span></td>

</tr>

Answer 1

Use for unchecked the checkbox

$(".chkIt").eq(index).removeAttr('checked');

Use for checked the checkbox

$('.chkIt').eq(index).attr('checked','checked');

Answer 2

Please check this one

 $(document).on('change', '.change_product_price', function () { $(this).closest('tr.product_row').find('td').each(function () { $(this).find("input.chkIt").prop("checked",false); $(this).find("input.chkItg").prop("checked",false); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <table><tr class="product_row"> <td class="small-check SerialNumber"><input class="chkIt" type="checkbox" name="products[product_id][]" value="76" qty="0" product_weight="0"></td> <td data-th="Product Name" class="fourth_i1">8 PACK SPECIALIST EMBOSSED SILVER FOIL 500 SHEET BOX 12CM X 20CM</td> <td data-th="Part Number" class="grid-text">EMBOSS-Pre-Cut x 8 Pack</td> <td class="small-check MarkGift"><input class="chkItg" type="checkbox" name="gift[product_id][]" value="76"></td> <td data-th="Quantity" class="grid-text"> <select name="products[quantity][76][]" class="change_product_price"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <input type="hidden" class="promo_min_quantity" name="promo_min_quantity" value=""> <input type="hidden" class="promo_free_units" name="promo_free_units" value="0"> </td> <td style="display:none;" class="grid-text"><span class="product_weight">5.8</span></td> <td data-th="Price / unit" class="grid-text">$<span class="product_price" prevvalue="180.00">180.00</span></td> <td data-th="Promo code" class="grid-text">N/A<!-- <input type="hidden" value="" name="products[promo_code][76][]" />--></td> <td data-th="Price" class="grid-text">$<span class="product_total_price">180.00</span></td> </tr> <tr class="product_row"> <td class="small-check SerialNumber"><input class="chkIt" type="checkbox" name="products[product_id][]" value="76" qty="0" product_weight="0"></td> <td data-th="Product Name" class="fourth_i1">12 PACK SPECIALIST EMBOSSED SILVER FOIL 500 SHEET BOX 12CM X 20CM</td> <td data-th="Part Number" class="grid-text">EMBOSS-Pre-Cut x 8 Pack</td> <td class="small-check MarkGift"><input class="chkItg" type="checkbox" name="gift[product_id][]" value="78"></td> <td data-th="Quantity" class="grid-text"> <select name="products[quantity][78][]" class="change_product_price"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <input type="hidden" class="promo_min_quantity" name="promo_min_quantity" value=""> <input type="hidden" class="promo_free_units" name="promo_free_units" value="0"> </td> <td style="display:none;" class="grid-text"><span class="product_weight">5.8</span></td> <td data-th="Price / unit" class="grid-text">$<span class="product_price" prevvalue="180.00">180.00</span></td> <td data-th="Promo code" class="grid-text">N/A<!-- <input type="hidden" value="" name="products[promo_code][78][]" />--></td> <td data-th="Price" class="grid-text">$<span class="product_total_price">180.00</span></td> </tr></table> 

Answer 3

尝试，

 $('.chkIt').eq(index)[0].checked = false