如果下拉菜单的值包含未付款项,则其他下拉菜单将自动设为只读

时间:2019-03-24 01:30:21

标签: javascript php html

我想做的是,当下拉付款状态的值未支付时,其他两个下拉列表将不会被自动单击。我的代码有效,只是因为我使用的是onclick,所以我需要单击下拉菜单以使代码正常工作。还有其他不需要单击下拉菜单的方式吗?

<div class="row">
                <div class="col-md-3">
                 <label>Order Status</label>
                     <?php
                        require '../includes/db.php';
                        $sql = $connection->prepare("SELECT * FROM orderstatus");
                        $sql->execute();
                        $data = $sql->fetchAll();
                        echo "<select name='orderstatusid' id='orderstatusid' class='form-control orderstatusid' required>";
                        foreach($data as $row):
                            echo "<option class='dropdown' value='{$row['orderstatusid']}'>".htmlspecialchars($row["description"])."</option>";
                        endforeach;
                        echo "</select>";
                     ?>
                     <br />
                </div> 
                <div class="col-md-3">
                 <label>Payment Status</label>
                     <?php
                        require '../includes/db.php';
                        $sql = $connection->prepare("SELECT * FROM paymentstatus");
                        $sql->execute();
                        $data = $sql->fetchAll();
                        echo "<select name='paymentstatusid' id='paymentstatusid' class='form-control paymentstatusid' onchange='disableotherdropdown()' required>";
                        foreach($data as $row):
                            echo "<option class='dropdown' value='{$row['paymentstatusid']}'>".htmlspecialchars($row["description"])."</option>";
                        endforeach;
                        echo "</select>";
                     ?> <br />
                </div>
                <div class="col-md-6">
                 <label>Date of Payment</label>
                 <input type="date" name="paiddate" id="paiddate" class="form-control paiddate" required/>
                 <br />
                </div>
             </div>



    <script>
       function disableotherdropdown() {
            var val = $(".paymentstatusid").val();
            if (val != '1') {
                $('.paiddate').css('border-color', 'red');
                $('.orderstatusid').attr("readonly", false); 
                $('.paiddate').attr("readonly", false);
            } else {
                $('.orderstatusid').attr("readonly", true); 
                $('.paiddate').attr("readonly", true);
                $('.paiddate').css('border-color', '#ccc');
            }

       }

    </script>

1 个答案:

答案 0 :(得分:0)

<script>
 $(document).ready(function(){ 
 $("#paymentstatusid").change(function() 
 {disableotherdropdown()});
 function disableotherdropdown(){
 var val =$("#paymentstatusid").val();
          alert(val)
          if (val !=1) {
             alert('a');
              $('#orderstatusid').attr("disabled",false); 
          } else {
            alert('b');  
       $('#orderstatusid').attr("disabled", true); 
    }
    }
   });
  </script>
  <body>
    <select id='paymentstatusid'>
     <option selected val='0'>hhh</option>
      <option value='1'>paid</option>
     <option value='2'>unpaid</option>
    </select>
   <select id='orderstatusid'>
     <option selected="selected" val='0' >&nbsp;</option>
     <option val='1'>a</option>
     <option val='2'>b</option>
  </select>
  </body>

更改
只读以禁用作品 $('#orderstatusid')。attr(“ disabled”,true);