javascript - 根据下拉列表的值启用/禁用复选框

Question

我有一个 HTML 表格，其中包含一个包含 3 个选项的下拉列表:"is"、“否”、“豁免”以及一个复选框。我已设置 Yes = 1、No = 0 和 Exempt = 2 的值。在页面加载时，如果下拉值等于 0 或 2，则应禁用该复选框。如果下拉值等于 1，则应启用该复选框。然而，目前我还没有得到正确的结果。之前我能够获取到第一行的值，但是并没有遍历整个表。

如何遍历整个表格以查找下拉列表中的每个值，并根据下拉列表中的内容启用/禁用复选框？

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 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

修改了 php 输出以显示选定的值，该值将使其禁用。

$(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>