1

以下のコードでは、ラジオ ボタンを使用して 2 つの異なるtextarea名前textAと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>

textareaを選択textAしてデータを追加すると、 textbox の下Currently Textbox A in useと textB にメッセージが表示されますCurrently Textbox B in use。そのために以下のコードを使用します。

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;

}
});

直面している問題: から に切り替えるtextAと、に追加したにもかかわらずtextB、 に表示されるメッセージが非表示になりませんerror div$("#error").slideUp("fast");($("#textA").prop("disabled"))

同じ問題のフィドル設定は次のとおりです

4

1 に答える 1

1

エラー div の非表示は、テキストエリアの「keyup」リスナーで実行されます。ラジオボタンの 1 つをクリックして、テキストエリアを切り替えるだけです。関数 optionA() および optionB() にスライドアップを追加する必要があります。例えば：

function optionA()  {

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

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

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

変更されたフィドルを参照してください: Fiddle

于 2013-10-19T00:15:42.333 に答える