启用和禁用单选按钮

时间:2014-03-14 04:27:27

标签: jquery html

我有一个申请表,其中单选按钮可选择其中一个选项。我必须禁用一个未选中的单选按钮。 例如,如果表格包含2个科目和科学,也包含 选修课,如科学和数学的计算机科学和生物学以及商业下的商业研究。如果我的选择是科学,我需要启用科学下的选修课,并禁用商务下的选修课。如果我的选择是商业,我需要启用商业选修课。 请告诉我我该怎么做

这是代码

$(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>

3 个答案:

答案 0 :(得分:2)

Jquery将是这些最简单的处理方法。将class="science"应用于您的科学选修课,并class="commerce"应用于您的商业选修课。

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

答案 1 :(得分:0)

试试这个:

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

<强>的javascript:

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

答案 2 :(得分:0)

如果必须使用javascript,则可以使用.disabled属性并将其设置为false。只需抓住正确的元素并进行设置即可。您可以使用getElementById()来抓取特定元素。

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