mardi 12 décembre 2017

Enable/Disable checkbox based on value of dropdown

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>




Aucun commentaire:

Enregistrer un commentaire