CODEWITHSUNDEEP
javascripthtml
Qwerty
Qwerty

Reputation: 43

Enable and disable text box on radio button selection

I would want to enable the text box when IP and Other radio buttons are selected. I would want to disable for the other radio button selection.

Works well for IP but I can not get it work for the Other. Anyone?

function EnableDisableTextBoxNext() {
    var chkYes = document.getElementById("chkYes");
    var addMoreDetailsNext = document.getElementById("addmoreDetailsOnSelection");
    addMoreDetailsNext.disabled = chkYes.checked ? false : true;
    if (!addMoreDetailsNext.disabled) {
        addMoreDetailsNext.focus();
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<label class="radio-inline"><input type="radio" name="org_rec" id="chkNo" value="FMOH"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkNo" value="CDC"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkYes" onclick="EnableDisableTextBoxNext()" value="IP"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkYes" onclick="EnableDisableTextBoxNext()" value="Other"> Other</label><br>


<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5" id="comment"></textarea>

Upvotes: 0

Views: 1289

Answers (2)

zerbene
zerbene

Reputation: 1502

Warning an Id attribute should always be unique. So you can use this code (I add onclick call to every radio button):

To avoid to declare all radio Button, I modify the JS part and the HTML part (change value attribut and remove id attribut) too:

function EnableDisableTextBoxNext() {
    const rbs = document.querySelectorAll('input[name="org_rec"]');
    var addMoreDetailsNext = document.getElementById("addmoreDetailsOnSelection");
    for (const rb of rbs) {
        if (rb.checked && rb.value == "yes") {
            addMoreDetailsNext.disabled = false
        break
        } else {
            addMoreDetailsNext.disabled = true
        }
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="no"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="no"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="yes"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="yes"> Other</label><br>


<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5" id="comment"></textarea>

Upvotes: 0

Gimantha23
Gimantha23

Reputation: 367

This is working as you want and also scalable; I passed the value of the radio button into the function as a parameter.

    function EnableDisableTextBoxNext(opt) {

        if (opt=="IP" || opt=="Other" ){
            document.getElementById("addmoreDetailsOnSelection").disabled = false;
        }
        else{
            document.getElementById("addmoreDetailsOnSelection").disabled = true;
        }
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<label class="radio-inline"><input type="radio" name="org_rec" id="chk1" onchange="EnableDisableTextBoxNext('FMOH')"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk2" onchange="EnableDisableTextBoxNext('CDC')"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk3" onchange="EnableDisableTextBoxNext('IP')"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk4" onchange="EnableDisableTextBoxNext('Other')"> Other</label><br>


<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5"></textarea>

Upvotes: 1

Related Questions