单击禁用的 <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>