CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 2187

radio button to enable form fields

I have a form containing two radio buttons, I want to enable corresponding fields when a radio button is checked. My code just isn't working, here it is:

<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">
$(document).ready(function() {

    var $type = $('select'),
        $field1 = $("#fieldID1"),
        $field2 = $("#fieldID2");

    $type.change(function() {

        var isDisabled = ($type.filter(":checked").val() === "1");

        $field1.prop("disabled", !isDisabled);
        $field2.prop("disabled", isDisabled);

    }).change();
});
</script>
</head>

My html body is like:

<body>

<form action="" method="post">

<input type="radio" name="select" value="1" />
<input type="text" name="fieldID1" id="fieldID1"/>

<input type="radio" name="select" value="2" />
<table id="fieldID2">
    <tr>...</tr>
    <tr>...</tr>
    ...
</table>

<input type="submit" value="Add">
</form>
</body>

I referenced the code from this post. Can anyone point me out what the problem is, I am not quite familiar with jQuery, thanks!

Still cannot be fixed...

Upvotes: 1

Views: 888

Answers (2)

amit_g
amit_g

Reputation: 31250

$(document).ready(function() {

    var $type = $(':radio[name="select"]'),
        $field1 = $("#fieldID1"),
        $field2 = $("#fieldID2");

    $type.change(function() {

        var isDisabled = ($type.filter(":checked").val() === "1");

        $field1.prop("disabled", !isDisabled);
        $field2.prop("disabled", isDisabled);

    }).change();
});

Upvotes: 0

Ariel
Ariel

Reputation: 26753

    $fieldID1.prop("disabled", !isDisabled);
    $fieldID2.prop("disabled", isDisabled);

Should probably be:

    $field1.prop("disabled", !isDisabled);
    $field2.prop("disabled", isDisabled);

Upvotes: 1

Related Questions