Enable/Disable checkbox based on value of dropdown

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>

Can you create a simple example with some static data? It is a bit difficult to reproduce the issue with current php code. — palaѕн
– palaѕн, Commented Dec 12, 2017 at 15:40
Here's an update to your sample that works: jsfiddle.net/kdvw0g7o/3 — emshore
– emshore, Commented Dec 12, 2017 at 16:15

Mark Schultheiss · Accepted Answer · 2017-12-12 15:56:33Z

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>

Collectives™ on Stack Overflow

Enable/Disable checkbox based on value of dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related