CODEWITHSUNDEEP
jqueryhtml
user3377635
user3377635

Reputation: 153

enabling and disable of radio buttons

I have a application form in which it as radio buttons to select one of the options. I have to disable one of radio button which is not selected. For eg if the form contains 2 subjects as Science and Commerce, and also it contains electives such as computer Science and biology under Science and Mathematics and Bussiness Studies under commerce. if my choice is Science i need to enable the electives under Science and disable the the electives under Commerce. If my choice is commerce i need to enable the electives under commerce. Please tel me how can i do this

Here is the Code

$(function() {
        $("#XISubmit").click(function(){
var XISubject = XIForm.find('input[name=XISubject]:checked').val();
    if (XISubject == null || XISubject == "") {
        alert("Please select the Study Streams Offered");
        return false;
    }
   $("#XIScience").click(function(){
$(".science").attr('disabled','disabled');
$(".commerce").removeAttr('disabled');

});

document.getElementById("XIForm").submit();
    }); 

<div class="sbold sleft"><input type="radio" name='XISubject' value='Science' id="XIScience"/> Science</div>
<div class="sbold sright"><input type='radio' name='XISubject' value='Commerce' id="XICommerce"/> Commerce</div>

<div class="sleft"> English Physics Chemistry Maths</div>
<div class="sright">English Accounts Commerce Economics</div>

    <br>
    <label>37(a).If your choice of <b>Subject Stream(ques.37)</b> is Science  select one of the two electives below:</li>

            <br>

<div class="sleft"><input type='radio' name='XIElectives' value='Biology' id="XIBiology" class="science"/> Biology</div>
<div class="sright"><input type='radio' name='XIElectives' value='Computer Science' id="XICS" class="science"/> Computer Science</div>
         <br>

         <label>37(b).If your choice of <b>Subject Stream(ques.37)</b> is Commerce select one of the two electives below:
        </label>
            <br>

<div class="sleft"><input type='radio' name='XIElectives' value='Mathematics' id="XIMathematics" class="commerce"/> Mathematics</div>
<div class="sright"><input type='radio' name='XIElectives' value='Business Studies' id="XIBS" class="commerce"/>    Business Studies</div>

<br>

Upvotes: 0

Views: 194

Answers (3)

Mr.G
Mr.G

Reputation: 3559

Try this:

$("#XIScience").click(function(){
    $(".science").attr('disabled','disabled');
    $(".commerce").removeAttr('disabled');
});

javascript:

document.getElementsByClassName('science').disabled=true;
document.getElementsByClassName('commerce').disabled=false;

Upvotes: 0

Andrew Brown
Andrew Brown

Reputation: 5424

Jquery will be these the easiest way to handle this. apply class="science" to your science electives and class="commerce" to your commerce electives.

$("#XIScience").click(function(){
    $(".science").prop('disabled', true);
    $(".commerce").prop('disabled', false);
});

Upvotes: 2

domdomcodecode
domdomcodecode

Reputation: 2443

If you have to use javascript, you can use the .disabled property and set it to false. Just grab the right elements and set it. You can use getElementById() to grab a specific element.

document.getElementById("XIScience").disabled = true;
document.getElementById("XICommerce").disabled = false;

Upvotes: 0

Related Questions