この状況でボタンを選択および選択解除する方法

Question

ドロップダウンメニューのjQueryハンドラが含まれています。そのため、最初のドロップダウンメニューで何かが選択されると、2番目のドロップダウンメニューのオプションが操作されます。ユーザーが何をするかは、最初のドロップダウンメニュー（OptionDropId）でオプションタイプを選択し、次に2番目のドロップダウンメニュー（NumberDropId）でユーザーが希望する回答の数を選択します。ドロップダウンメニューの下にボタンのリストが表示され、ユーザーは2番目のドロップダウンメニューでユーザーが選択した数に応じてボタンの数を選択します。

ここで、ユーザーが2つのボタンをクリックしてオプションタイプ（最初のドロップダウンメニュー）を変更しても、選択したボタンが選択されているとします。オプションタイプが変更されていればボタンを選択解除します。

これはうまくいきましたが、changeイベントハンドラを使用してjquery（このコードが必要です）をバインドしていたため、オプションタイプが変更されたときにボタンの選択が解除されません。私はこの問題を解決するために必要な何

：

以下

選択と非選択ボタンの私のjQueryと機能である：

$(document).ready(function() 
{ 
    var OptDrop = new Array(); 

    OptDrop.abc = ["",1,2]; 
    OptDrop.abcd = ["",1,2,3]; 
    OptDrop.abcde = ["",1,2,3,4]; 
    OptDrop.trueorfalse = [1]; 
    OptDrop.yesorno = [1]; 

    $("#optionDropId").change(function() 
    { 
     var selectedValue = $(this).val(); 
     $("#numberDropId").html(""); 
     $.each(OptDrop[selectedValue], function (x, y) 
     { 
      $("#numberDropId").append($("<option></option>").attr("value", y).html(y)); 
     }); 
    }); 

    $("#optionDropId").change(); 
});  

var currenttotal=0; 
function getButtons() 
{ 
    document.getElementById("answerA").className="answerBtnsOff"; 
    document.getElementById("answerB").className="answerBtnsOff"; 
    document.getElementById("answerC").className="answerBtnsOff"; 
    document.getElementById("answerD").className="answerBtnsOff"; 
    document.getElementById("answerE").className="answerBtnsOff";  
    document.getElementById("answerTrue").className="answerBtnsOff"; 
    document.getElementById("answerFalse").className="answerBtnsOff"; 
    document.getElementById("answerYes").className="answerBtnsOff"; 
    document.getElementById("answerNo").className="answerBtnsOff"; 

    currenttotal=0; 
} 

function btnclick(btn) 
{ 
    if(document.getElementById("numberDropId").value=="") 
    { 
     alert('You must first select the number of answers you require from the drop down menu'); 
     return false; 
    } 
    if (btn.className=="answerBtnsOn") 
    { 
     btn.className="answerBtnsOff"; 
     currenttotal--; 
     return false; 
    } 
    if(document.getElementById("numberDropId").value==currenttotal) 
    { 
     alert('You are not allowed beyond the limit of the number of answers you require, deselect other button'); 
     return false; 
    } 
    if (btn.className=="answerBtnsOff") 
    { 
     btn.className="answerBtnsOn"; 
     currenttotal++; 
     return false; 
    } 

} 

HTMLコードは以下の通りです：

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);"> 
    <table id="optionAndAnswer"> 
    <tr> 
     <th colspan="2"> 
     Option and Answer 
     </th> 
    </tr> 
    <tr> 
     <td>Option Type:</td> 
     <td> 
     <select name="optionDrop" id="optionDropId" onChange="getDropDown()"> 
      <option value="">Please Select</option> 
      <option value="abc">ABC</option> 
      <option value="abcd">ABCD</option> 
      <option value="abcde">ABCDE</option> 
      <option value="trueorfalse">True or False</option> 
      <option value="yesorno">Yes or No</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
    <td>Number of Answers:</td> 
    <td> 
     <select name="numberDrop" id="numberDropId" onChange="getButtons()"> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td>Answer</td> 
    <td> 
     <input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerBName" id="answerB" type="button" value="B" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerCName" id="answerC" type="button" value="C" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerDName" id="answerD" type="button"  value="D" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerEName" id="answerE" type="button" value="E" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerTrueName" id="answerTrue" type="button" value="True" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerFalseName" id="answerFalse" type="button" value="False" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerYesName" id="answerYes" type="button" value="Yes" onclick="javascript:btnclick(this);"/> 
     <input class="answerBtns" name="answerNoName" id="answerNo"  type="button" value="No" onclick="javascript:btnclick(this);"/> 
    </td> 
    </tr> 
    </table> 
</form> 

Answer 1

あなたはここで説明するように、Jqueryの.removeAtrr（）関数を使用することができます：Best way to unselect a <select> in jQuery?

あなたの変更機能は次のようになります：

$("#optionDropId").change(function() 
    { 
     var selectedValue = $(this).val(); 
     $("#numberDropId").html(""); 
     $.each(OptDrop[selectedValue], function (x, y) 
     { 
      $("#numberDropId").append($("<option></option>").attr("value", y).html(y)); 
     }); 
     $("#numberDropId").removeAttr("selected"); 
    });