根据下拉值启用/禁用复选框

Question

I have an HTML table that includes a dropdown with 3 selections, Yes, No, Exempt and also a checkbox. I have set the value of Yes = 1, No = 0, and Exempt = 2. On page load, if the dropdown value equals 0 or 2, then the checkbox should be disabled. If the dropdown value equals 1, then the checkbox should be enabled. However, currently I have had no luck with getting the correct result. I was able to get the value of the first row before, but that did not traverse through the entire table.

How can I traverse through the entire table to find each value of the dropdown, and also enable/disable the checkbox based on what is in the dropdown?

Javascript:

$(document).ready(function () {
    $('#billing_table tr').each(function() {

    var checked = $(this).find($(".billed-select")).val();
    console.log(checked);

    if(checked != "1") {
        $('.paid').attr('disabled', true);
    } else {
        $('.paid').attr('disabled', false);
    }
  });
});

HTML Table:

<table id="billing_table">
<thead>
    <tr>
    <td style="display: none">Account</td>
    <td>Collector Name</td>
    <td>Customer</td>
    <td>Bill Date</td>
    <td>Days Until<br>Next Action</td>
    <td>Next Action</td>
    <td>Billed</td>
    <td>Bill<br>Amount</td>
    <td>Payment<br>Due Date</td>
    <td>Notes</td>
    <td>Paid</td>
    <td>Save</td>
    </tr>
</thead>
<tbody>


<?php
    foreach ($dbh->query($bill) as $rows) {
    ?>
    <tr class="row">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>   

        <?php if ($rows ['Billed Status'] == 'Billed') {?>      
        <td>
            <select class="billed-select">
                <option class="selection" value="1" selected>Yes</option>
                <option class="selection" value="0">No</option>
                <option class="selection" value="2">Exempt</option>
            </select>
        </td>    
        <?php } else if ($rows ['Billed Status'] == 'Unbilled'){ ?>       
        <td>
            <select class="billed-select">
                <option class="selection" value="1">Yes</option>
                <option class="selection" value="0" selected>No</option>
                <option class="selection" value="2">Exempt</option>
            </select>
        </td>
        <?php } else if ($rows ['Billed Status'] == 'Exempt'){ ?>       
        <td>
            <select class="billed-select">
                <option class="selection" value="1">Yes</option>
                <option class="selection" value="0">No</option>
                <option class="selection" value="2" selected>Exempt</option>
            </select>
        </td>
        <?php } ?>

        <td></td>
        <td></td>
        <td></td>

        <?php if ($rows ['Payment Status'] == 'Paid') {?>
        <td align="center"><input type="checkbox" id="paid" class="paid" name="paid" checked></td>
        <?php } else { ?>
        <td align="center"><input type="checkbox" id="paid" class="paid" name="paid"></td>
        <?php } ?>

        <td></td>
    </tr>
 <?php
  }
 ?>
</tbody>
</table>

Answer 1

Modified the php out to show a selected value that WOULD make it disabled.

 $(document).ready(function() { // add row class, avoid headers $('#billing_table tr.row').each(function() { var checked = $(this).find(".billed-select").find("option:selected").val(); console.log("checked:",checked);// alerts 0 $(this).find('.paid').prop('disabled', (checked != "1")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="billing_table"> <thead> <tr> <td style="display: none">Account</td> <td>Collector Name</td> <td>Customer</td> <td>Bill Date</td> <td>Days Until<br>Next Action</td> <td>Next Action</td> <td>Billed</td> <td>Bill<br>Amount</td> <td>Payment<br>Due Date</td> <td>Notes</td> <td>Paid</td> <td>Save</td> </tr> </thead> <tbody> <tr class="row"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <select class="billed-select"> <option class="selection" value="1" >Yes</option> <option class="selection" value="0" selected>No</option> <option class="selection" value="2">Exempt</option> </select> </td> <td></td> <td></td> <td></td> <td align="center"><input type="checkbox" id="paid" class="paid" name="paid" checked></td> <td></td> </tr> </tbody> </table>