चुनिंदा

Question

से विकल्प को सक्षम या अक्षम करें, मैं एक विकल्प चुनने योग्य या गैर-चयन योग्य बनाने का प्रयास कर रहा हूं, चाहे वे कोई अन्य विकल्प चुनते हों या नहीं। उदाहरण के लिए, यदि विकल्प 1-6 है और उन्होंने अपने पहले चयन बॉक्स में विकल्प 1 नहीं चुना है, तो उसमें समान बॉक्स और किसी अन्य रूप में विकल्प में चुना गया है, तो विकल्प 6 को चुना नहीं जा सका।

मैंने चारों ओर देखा, लेकिन यह सब कुछ हासिल करने के लिए बटन पर क्लिक करने के बारे में है।

इस कोड को मेरे पास है (मैं भी onclick की कोशिश की है)

<script type="text/javascript"> 
     function makeDisable(){ 
     var x=document.getElementById("mySelect2"); 
     x.disabled=true 
     } 
    function makeEnable(){ 
     var x=document.getElementById("mySelect2"); 
      x.disabled=false 
    }</script> 
    <form> 
     <select class="mySelect" id="mySelect"> 
     <option onchange="makeEnable()" value="Enable list">Apple</option> 
     <option onchange="makeDisable()" value="Disable list">Banana</option> 
     <option id="mySelect2" disabled="true">Orange</option> 
    </select> 
    </form> 

Answer 1

विकल्प तत्वों घटना "onchange" की जरूरत नहीं है, लेकिन तत्वों का चयन है।

मैंने तुरंत एक कोड स्निपेट लिखा है। आप अधिक चुनिंदा आइटम जोड़ सकते हैं। जब आप उन चुनिंदा तत्वों में से किसी एक विकल्प का चयन करते हैं, तो आपको अन्य चुनिंदा तत्वों में एक ही इंडेक्स पर विकल्प नहीं चुनना चाहिए।

<script type="text/javascript"> 
    function toggleDisability(selectElement){ 
    //Getting all select elements 
    var arraySelects = document.getElementsByClassName('mySelect'); 
    //Getting selected index 
    var selectedOption = selectElement.selectedIndex; 
    //Disabling options at same index in other select elements 
    for(var i=0; i<arraySelects.length; i++) { 
    if(arraySelects[i] == selectElement) 
    continue; //Passing the selected Select Element 

    arraySelects[i].options[selectedOption].disabled = true; 
    } 
    } 
</script> 
<form> 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> 
    <option>Apple</option> 
    <option>Banana</option> 
    <option>Orange</option> 
</select> 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2"> 
    <option>Hamburger</option> 
    <option>Pizza</option> 
    <option>Cola</option> 
</select> 
</form> 

Answer 2

<script type="text/javascript"> 
 
    function toggleDisability(selectElement){ 
 
    //Getting all select elements 
 
    var arraySelects = document.getElementsByClassName('mySelect'); 
 
    //Getting selected index 
 
    var selectedOption = selectElement.selectedIndex; 
 
    //Disabling options at same index in other select elements 
 
    for(var i=0; i<selectElement.length; i++) { 
 
    if(arraySelects[i] == selectedOption) 
 
    continue; //Passing the selected Select Element 
 

 
    arraySelects[i].options[selectedOption].disabled = true; 
 
    } 
 
    } 
 
</script> 
 
<form> 
 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> 
 
    <option>Apple</option> 
 
    <option>Banana</option> 
 
    <option>Orange</option> 
 
</select> 
 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2"> 
 
    <option>Hamburger</option> 
 
    <option>Pizza</option> 
 
    <option>Cola</option> 
 
</select> 
 
</form>