jQueryを使用してテキストボックスを無効にする

Question

jQueryの新機能です。私は初心者として考えてください。私はラジオボタンを持っているPHPフォームを持っています。どのラジオが選択されているかに基づいて、テキストボックスを無効にしたいと考えています。以下はシナリオです：

ラジオボタン： テキストボックス現金とチェック：いいえをチェックして、デフォルトで日付

をチェックし、テキストボックスなしをチェックして、日付を確認してくださいが無効に設定されているとラジオ現金がチェックされます。

1. ユーザーがチェックラジオをクリックすると、テキストボックスがチェックされ、チェックデートが有効になっている必要があります。可能であれば、必要に応じて作成する必要があります。
2. ユーザーが現金をクリックすると、テキストボックスのチェック番号とチェックデートを無効にする必要があり、必須のプロパティを削除する必要があります。

私はheader.phpのにjQueryの1.12.3分を追加した

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> 

を助けてください

Answer 1

あなたは以下のようにすることができます。

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