JQUERY代码不适用于每个数组值

Question

I want to do enable and disable select option while click on check box but it only work for single value not for each value of array.

If I used the id as array to get the values of select it doesn't work

Kindly update my code or provide me alternative way.I already try java script it also not working properly

 <script>

    var update_courier = function () {
        if ($("#checkbox").is(":checked")) {
            $('#courier').prop('disabled', false);
        }
        else {
            $('#courier').prop('disabled', 'disabled');
        }
    };

    $(update_courier);
    $("#checkbox").change(update_courier);
    </script>
    <div class="conatiner">
        <div class="col-sm-3 col-sm-offset-3" style="margin-top: -35%;">
        <form action="<?php echo site_url('invoice/invoidlist');  ?>" method="POST">
        <table class="table table-bordered">
        <?php foreach($details as $detail):?>

            <tr>
            <td><input id="checkbox" type="checkbox"  value="<?php echo $detail['OrderId'];?>"  name="checkbox">

                <td>
                    <?= $detail['OrderId']?>
                    </td>
                <td>
                    <?= $detail['CustomerName']?>
                    </td>
                    <td>
                    <?=$detail['Address']?>
                    </td>
                    <td>
                    <?=$detail['ZipCode']?>
                    </td>
                    <td>
                    <?=$detail['FinanicalStatus']?>
                    </td>
                    <td>
                    <?=$detail['Payment']?>
                    </td>
                <td>
                <select id="courier">
                <option>(choose one)</option>
        <option value='1'>Bluedart</option>
            <option value='2'>Delhivery</option>
            <option value='3'>DTDC</option>
            <option value='4'>IndiaPost</option>
    </select>

            </td>
                </tr>

            <?php endforeach; ?>
        </table>

    </div>
    <input type="submit" name="submit" value="submit" style="margin-left: 30%;">
    </form>
    </div>
    </div>

Answer 1

DEMO - Created static table in demo given here

Instead of id on checkbox use class as id should be unique in HTML DOM and then you can write a click event to checkbox and enable or disable select element corresponding to its row as below

$(".chkSelect").on('click',function(){
   $(this).closest('tr').find('.courier').prop('disabled',$(this).is(":checked"))
});

Here .chkSelect is class for checkbox and .courier is class for select

Your updated php for table would be as below:

<table class="table table-bordered">
     <?php foreach($details as $detail):?>
         <tr>
            <td>
                <input class="chkSelect" type="checkbox"  value="<?php echo $detail['OrderId'];?>"  name="checkbox">
            <td>
                <?= $detail['OrderId']?>
            </td>
            <td>
                <?= $detail['CustomerName']?>
            </td>
            <td>
                <?=$detail['Address']?>
            </td>
            <td>
                <?=$detail['ZipCode']?>
            </td>
            <td>
                <?=$detail['FinanicalStatus']?>
            </td>
            <td>
                <?=$detail['Payment']?>
            </td>
            <td>
                <select class="courier"> <!--Change this to class-->
                    <option>(choose one)</option>
                    <option value='1'>Bluedart</option>
                    <option value='2'>Delhivery</option>
                    <option value='3'>DTDC</option>
                    <option value='4'>IndiaPost</option>
                </select>
            </td>
        </tr>
   <?php endforeach; ?>
</table>