单击禁用时如何触发警报消息<select>选项框？

Question

I want to fire an alert if clicking on a disabled <select> option box. When the <select> box is not disabled it should not fire, regardless if the option within the option select is disabled.

It should ONLY fire when the entire <select> box is disabled, regardless if the individual option itself is disabled or enabled. An individual option alone should not effect the alert.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $('#optDir').click(function(){ alert("The Box is dissabled... ``Text Direction`` can only be chosen, when choosing ``Auto Detect`` languadge"); }); }); </script> <script type="text/javascript"> $(document).ready(function () { $("#opt").change(function () { if ($(this).val() == "auto") { $("#optDir").prop('disabled', false); } else { $("#optDir").prop('disabled', true); } }) }); </script> <script type='text/javascript'> function setRtL(obj) { var textbox = document.getElementById("SeekBox"); textbox.style.direction = ["ar","RightToLeft"].indexOf(obj.value) >=0 ? "rtl" : "ltr"; } </script> <div id="Layer1" style="position:relative; text-align:center; overflow:hidden; left:0px; top:0px; width:100%; height:auto;z-index:1;"> <select name="LangF" class="OBSMatch" id="opt" onchange="setRtL(this)"> <option value="auto">Auto Detect</option> <option value="ar">Arabic</option> <option selected value="en">English</option> <option value="fr">French</option> <option value="de">German</option> <option value="ru">Russian</option> <option value="es">Spanish</option> </select> <select disabled name="LangF" class="dis-element" id="optDir" onchange="setRtL(this)" title="``Text Direction`` can only be chosen, when choosing ``Auto Detect`` languadge"> <option selected value="" disabled>Only with: Auto Detect</option> <option value="">Text: Left To Right</option> <option value="RightToLeft">Text: Right To Left</option> </select> </div>

NOTE: All model codes are simplified, the entire work is much bigger.

Answer 1

Disabled elements don't trigger any mouse events. So you can't capture click even from disabled select box. You can keep a wrapper div around it and then put onclick event on it from there you can get the select element using .siblings() and check if it has disabled property. You will have to remove the wrapper div when you enable the select. for that you can hide() the wrapper div and show it again when needed.

Something like this seems to work:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type='text/javascript'> function checkDisableSelect(obj){ var select = $(obj).siblings('#optDir').first(); if($(select).attr('disabled')) alert("The Box is dissabled... ``Text Direction`` can only be chosen, when choosing ``Auto Detect`` languadge"); } </script> <script type="text/javascript"> $(document).ready(function () { $("#opt").change(function () { if ($(this).val() == "auto") { $("#optDir").prop('disabled', false); $('#selectWrapper').hide(); } else { $("#optDir").prop('disabled', true); $('#selectWrapper').show(); } }) }); </script> <script type='text/javascript'> function setRtL(obj) { var textbox = document.getElementById("SeekBox"); textbox.style.direction = ["ar","RightToLeft"].indexOf(obj.value) >=0 ? "rtl" : "ltr"; } </script> <select name="LangF" class="OBSMatch" id="opt" onchange="setRtL(this)"> <option value="auto">Auto Detect</option> <option value="ar">Arabic</option> <option selected value="en">English</option> <option value="fr">French</option> <option value="de">German</option> <option value="ru">Russian</option> <option value="es">Spanish</option> </select> <div id="selectContainer" style="position:relative"> <select disabled name="LangF" class="dis-element" id="optDir" onchange="setRtL(this)" title="``Text Direction`` can only be chosen, when choosing ``Auto Detect`` languadge"> <option selected value="" disabled>Only with: Auto Detect</option> <option value="">Text: Left To Right</option> <option value="RightToLeft">Text: Right To Left</option> </select> <div id="selectWrapper" style="position:absolute; top:0; left:0; bottom:0; right:0;" onclick="checkDisableSelect(this)"></div> </div>