Rajiv Rajiv - 6 months ago 11
jQuery Question

Textbox toggle JQuery

I have the below code wherein enabling and disabling of text box is not working:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td><label class="control-label">Mode</label></td>
<td>&nbsp;
<label><input type="radio" name="payMode" value="cash" checked>Cash</label>
<label><input type="radio" name="payMode" value="cheque">Cheque</label>
</td>
</tr>
<tr>
<td><label>Cheque No</label></td>
<td><input type="number" name="chequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
</tr>
<tr>
<td><label>Cheque Date</label></td>
<td><input type="date" name="chequeDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
</tr>
</table>
<script>
<script>
$(':radio[name=payMode]').change(function () {
var prop = this.value == 'cash';
$('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
</body>
</html>


Basically I am trying to enable 2 textboxes based on the radio click. Enable Cheque No and Cheque Date textbox if the user selects the Pay Mode as Cheque. If the user selects cash then disable the 2 textboxes. Please advice

Answer

You have two starting script tags, the inner script tag will cause a javascript error.

EDIT

Here is the link to the JSFiddle that proves it, I only removed the duplicate tag. Sometimes the simple answers are the best :)

https://jsfiddle.net/0k98xnch/

<script>
        $(':radio[name=payMode]').change(function () {
    var prop = this.value == 'cash';
    $('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
Comments