單擊禁用時如何觸發警報消息<select>選項框？

Question

如果單擊禁用的<select>選項框，我想觸發警報。 當<select>框未被禁用時，它不應觸發，無論選項選擇中的選項是否被禁用。

它應該只在整個<select>框被禁用時觸發，無論單個選項本身是禁用還是啟用。 單獨的選項不應影響警報。

 <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>

注意：所有型號代碼都簡化了，整個工作要大得多。

Answer 1

禁用的元素不會觸發任何鼠標事件。 因此，即使從禁用的選擇框中也無法捕獲點擊。 您可以在其周圍保留一個包裝器 div，然后在其上放置 onclick 事件，您可以使用.siblings()獲取選擇元素並檢查它是否具有禁用屬性。 啟用選擇時，您必須刪除包裝器 div。 為此，您可以hide()包裝器 div 並在需要時再次顯示它。

像這樣的東西似乎有效：

 <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>