If statement to check prop(“disabled”) in jquery not working

Question

In below code, I use a radio button to show two different textarea named textA and textB

<input onClick="optionA();" type="radio" name="button2" value="Yes" checked /><label>Option A</label>   
<input onClick="optionB();" type="radio" name="button2" value="No" /><label>Option B</label>

<div id="textA" >
<div class="input"><span><textarea  class="textarea" id="textboxA" name="textA" type="text"></textarea></span> </div>   
</div>

<div id="textB" style="display:none;">
<div class="input"><span><textarea  class="textarea" id="textboxB" name="textB" type="text"></textarea></span> </div>   
</div>

<div id="error" style="display:none;"></div>

If I select textA textarea and add data to it, it will display a message below textbox Currently Textbox A in use and for textB Currently Textbox B in use . I use below code for that:

function optionA()  {

$('#textA').prop("disabled",false);
$('#textA').slideDown("fast");


document.getElementById("textboxB").value="";
$('#textB').slideUp("fast");
$('#textB').prop("disabled",true);

}

function optionB()  {

$('#textB').prop("disabled",false);
$('#textB').slideDown("fast");

document.getElementById("textboxA").value="";
$('#textA').slideUp("fast");
$('#textA').prop("disabled",true);

}


$("#textboxA").keyup(function () {

if((!$("#textboxA").val()) || ($("#textA").prop("disabled"))){

$("#error").slideUp("fast");
}
else{

var message;
message ="Currently TextboxA in use";
$("#error").slideDown("fast");
document.getElementById('error').innerHTML=message;

}
});

$("#textboxB").keyup(function () {

if((!$("#textboxB").val()) || ($("#textB").prop("disabled"))){

$("#error").slideUp("fast");
}
else{

var message;
message ="Currently TextboxB in use";
$("#error").slideDown("fast");
document.getElementById('error').innerHTML=message;

}
});

problem facing: If I am switching from textA to textB , the message which shows in error div is not hiding eventhough I have added $("#error").slideUp("fast"); for ($("#textA").prop("disabled"))

Here is the fiddle setup for the same issue

Answer 1

The hiding of the error div is executed in the "keyup" listener of your textareas. Simply switching the textareas, by clicking one of the radio buttons. You need to add the slideup to the functions optionA() and optionB(). For example:

function optionA()  {

$('#textA').prop("disabled",false);
$('#textA').slideDown("fast");

document.getElementById("textboxB").value="";
$('#textB').slideUp("fast");
$('#textB').prop("disabled",true);

$("#error").slideUp("fast");
}

See the changed fiddle: Fiddle