使用jQuery

时间:2016-05-15 06:38:33

标签: jquery

我是jQuery的新手,请认为我是新手。我有一个PHP表单,我有一个单选按钮。根据选择的无线电,我想禁用文本框。以下是场景:

单选按钮:现金和支票 文本框:选中否和检查日期

默认情况下,文本框检查号和检查日期设置为禁用,并且检查无线电现金。

  1. 当用户点击Check Radio时,文本框选中no并且必须启用检查日期,如果可能,应根据需要进行。
  2. 当用户点击现金时,必须禁用文本框检查否和检查日期,并且必须删除所需的属性。
  3. 我已将jQuery 1.12.3分钟添加到我的header.php

    的header.php

    !-- JQuery 1.12.3 JS -->
    <script src="../js/jquery-1.12.3.min.js"></script>
    

    MainPage.php

    <tr>
        <td class="col-md-4"><label class="control-label" for="payMode">Mode</label></td>
        <td class="col-md-8">
            &nbsp;
            <label class='radio-inline'><input type='radio' name='rbPayMode' id='bd' value='0' checked>Cash</label>
            <label class='radio-inline'><input type='radio' name='rbPayMode' id='bd' value='1'>Cheque</label>
        </td>
    </tr>
    <tr>
        <td class="col-md-4"><label class="control-label" for="ChequeNo">Cheque No</label></td>
        <td class="col-md-8"><input type="number" name="txtChequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
    </tr>
    <tr>
        <td class="col-md-4"><label class="control-label" for="ChequeDate">Cheque Date</label></td>
        <td class="col-md-8"><input type="date" name="txtChqueDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
    </tr>
    

    请帮助

1 个答案:

答案 0 :(得分:1)

你可以这样做。

&#13;
&#13;
$(':radio[name=rbPayMode]').change(function () {
    var prop = this.value == 0;
    $('input[name=txtChequeNo], input[name=txtChqueDate]').prop({ disabled: prop, required: !prop });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="col-md-4"><label class="control-label" for="payMode">Mode</label></td>
        <td class="col-md-8">
            &nbsp;
            <label class='radio-inline'><input type='radio' name='rbPayMode' id='bd' value='0' checked>Cash</label>
            <label class='radio-inline'><input type='radio' name='rbPayMode' id='bd' value='1'>Cheque</label>
        </td>
    </tr>
    <tr>
        <td class="col-md-4"><label class="control-label" for="ChequeNo">Cheque No</label></td>
        <td class="col-md-8"><input type="number" name="txtChequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
    </tr>
    <tr>
        <td class="col-md-4"><label class="control-label" for="ChequeDate">Cheque Date</label></td>
        <td class="col-md-8"><input type="date" name="txtChqueDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
    </tr>
</table>
&#13;
&#13;
&#13;