使用jQuery启用禁用文本框

拉吉夫

我对jQuery非常陌生,请认为我是新手。我有一个PHP表单,其中有一个单选按钮。基于选择哪个广播,我想禁用文本框。下面是方案:

单选按钮:现金和支票文本框:支票号码和支票日期

默认情况下,“文本框”的“检查号”和“检查日期”被设置为禁用,并选中“无线电现金”。

  1. 当用户单击“检查单选”时,文本框将选中“否”,并且必须启用检查日期,如果可能,应根据需要进行检查。
  2. 当用户单击“现金”时,必须禁用“检查否”和“检查日期”文本框,并且必须删除必需的属性。

我已经将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>

请帮忙

易卜拉欣汗

您可以按照以下步骤进行操作。

$(':radio[name=rbPayMode]').change(function () {
    var prop = this.value == 0;
    $('input[name=txtChequeNo], input[name=txtChqueDate]').prop({ disabled: prop, required: !prop });
});
<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章