Question

我有一个HTML表，其中包含一个带有3个选项的下拉列表，是，否，豁免，还有一个复选框。我设置了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 out以显示一个选中的值，该值将被禁用。

＆＃13;

$(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"));
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: