CODEWITHSUNDEEP
javascripthtml
New developer
New developer

Reputation: 39

How to enable textbox when one of the radio button is clicked

I have 4 radio buttons and a textbox in html page using bootstrap 3,i want to make the textbox disabled by default and enable it when the radio button EnterRange is enabled.Any suggestions?

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#txtbox").attr("disabled", false);
        }
    });
</script>

html code:

<div class="customradio">
    <input class="radioBtn" type="radio" id="5" name="optradio" value="5" checked="checked">
    <label for="5">5 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="10" name="optradio" value="10">
    <label for="10">10 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="15" name="optradio" value="15">
    <label for="15">15 Km</label>
</div>
<div class="customradio">
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange">
    <label for="EnterRange">Enter Range</label>
</div>
<div>
   <input type="text" id="dist" name="txtbox" disabled="disabled"> <label>Km</label>
</div>

Upvotes: 1

Views: 6156

Answers (3)

inverted_index
inverted_index

Reputation: 2437

You can do it simply by jQuery. Try the following snippets:

Html:

<div class="customradio">
    <input class="radioBtn" type="radio" id="EnterRange" name="optradio" value="EnterRange">
    <label for="EnterRange">Enter Range</label>
</div>
<div>
   <input type="text" id="dist" name="txtbox"> <label>Km</label>
</div>

for jQuery 1.6+, You can use .prop() function:

$(document).ready(function () {
        $("#dist").prop('disabled', true);
        $("#EnterRange").click(function () {
            $("#dist").prop('disabled', false);
        });
});

jQuery 1.5 and below, The .attr and .remoceAttr do the same thing:

$(document).ready(function () {
    $("#dist").attr("disabled","disabled");
    $("#EnterRange").click(function () {
        $("#dist").removeAttr("disabled");
    });
});

Upvotes: 0

Kritika Shrivastava
Kritika Shrivastava

Reputation: 129

Your code will work fine just check ID you are using

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#txtbox").attr("disabled", false);
        }
    });
</script>

use

<script type="text/javascript">
    $(".radioBtn").click(function() {
    $("#dist").attr("disabled", true);
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#dist").attr("disabled", false);
        }
    });
</script>

Upvotes: 0

Mayank Vadiya
Mayank Vadiya

Reputation: 1451

You have only one mistake is here 

if ($("input[name=optradio]:checked").val() == "EnterRange") {
 $("#dist").attr("disabled", false);  //selector is wrong.
}

You have just put name as selector actually your code is perfect you need to change only this selector as $("#txtbox") to $("#dist")

$(".radioBtn").change(function() {
    $("#dist").attr("disabled", true);
    alert($("input[name=optradio]:checked").val())
        if ($("input[name=optradio]:checked").val() == "EnterRange") {
            $("#dist").attr("disabled", false);
        }
    });

Upvotes: 1

Related Questions