Question

I have 2 buttons which are “Yes” and “No”

<input class="answerBtns answers answerBtnsOff" name="answerYesName"   id="answerYes"   type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerNoName"    id="answerNo"        type="button"   value="No"      onclick="btnclick(this);"/>    

What I was attempting to do was that if the “Yes” button is highlighted, then disable the “No” button, if the “No” button is highlighted then disable the “Yes” button, and if none of the 2 buttons are highlighted, then remove the disabled from both buttons.

But I can quite seem to get this work, I keep getting errors in my if statement when trying to read the class using .class(), how can I get the function below to work as how I stated I wanted to work?

function btnclick(btn) {
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    $(btn).toggleClass("answerBtnsOff");
    $(btn).toggleClass("answerBtnsOn");
    if (btn = 'Yes').class('.answerBtnsOn') {
        $(btn = 'No').attr("disabled", "disabled");
    } else if (btn = 'No').class('.answerBtnsOn') {
        $(btn = 'Yes').attr("disabled", "disabled");
    } else if (btn = 'Yes' && btn = 'No').class('.answerBtnsOff') {
        $(btn = 'Yes' && btn = 'No').removeAttr("disabled");
    }
    return false;
}

Answer 1

I think that this is what you want:

Demo: http://jsfiddle.net/SO_AMK/7qSen/

HTML:

<input class="answerBtns answers answerBtnsOff" name="answerYesName"   id="answerYes"   type="button"   value="Yes"/>
<input class="answerBtns answers answerBtnsOff" name="answerNoName"    id="answerNo"        type="button"   value="No"/>​

jQuery:

$(".answerBtns").click(function(){
    if ($(this).val() == "Yes") {
        $("#answerNo").attr("disabled", "disabled");
    }

    else if ($(this).val() == "No") {
        $("#answerYes").attr("disabled", "disabled");
    }

});​