Question

如果点击禁用的＆lt; select＆gt;，我想发出提醒选项框。当＆lt; select＆gt;如果禁用选项选项中的选项，则不会禁用该框，也不应触发该框。它只应在整个＆lt; select＆gt;时触发无论是否禁用或启用了单个选项本身，都会禁用该框。单独的个别选项不应影响警报。＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆lt; script type ='text / javascript'＆gt; $（文件）。就绪（函数（）{ $（ '＃optDir'）。点击（函数（）{ 警告（“盒子是不可用的......``文本方向``只能选择，当选择``自动检测``languadge”时; }）; }）; ＆LT; /脚本＆GT; ＆lt; script type =“text / javascript”＆gt; $（document）.ready（function（）{ $（“＃opt”）。change（function（）{ if（$（this）.val（）==“auto”）{ $（“＃optDir”）。prop（'disabled'，false）; } else { $（“＃optDir”）。prop（'disabled'，true）; } }） }）; ＆LT; /脚本＆GT; ＆lt; script type ='text / javascript'＆gt; function setRtL（obj）{ var textbox = document.getElementById（“SeekBox”）; textbox.style.direction = [“ar”，“RightToLeft”]。indexOf（obj.value）＆gt; = 0？ “rtl”：“ltr”; } ＆LT; /脚本＆GT; ＆lt; div id =“Layer1”style =“position：relative; text-align：center; overflow：hidden; left：0px; top：0px; width：100％; height：auto; z-index：1;”＆gt; ; ＆lt; select name =“LangF”class =“OBSMatch”id =“opt”onchange =“setRtL（this）”＆gt; ＆lt; option value =“auto”＆gt;自动检测＆lt; /选项＆gt; ＆lt; option value =“ar”＆gt; Arabic＆lt; / option＆gt; ＆lt; option selected value =“en”＆gt; English＆lt; / option＆gt; ＆lt; option value =“fr”＆gt; French＆lt; / option＆gt; ＆lt; option value =“de”＆gt;德语＆lt; /选项＆gt; ＆lt; option value =“ru”＆gt; Russian＆lt; / option＆gt; ＆lt; option value =“es”＆gt;西班牙语＆lt; /选项＆gt; ＆LT; /选择＆GT; ＆lt; select disabled name =“LangF”class =“dis-element”id =“optDir”onchange =“setRtL（this）”title =“``Text Direction``只能选择``Auto Detect` `languadge'＆gt; ＆lt; option selected value =“”禁用＆gt;仅用于：自动检测＆lt; /选项＆gt; ＆lt; option value =“”＆gt; Text：Left To Right＆lt; / option＆gt; ＆lt; option value =“RightToLeft”＆gt;文字：从右到左＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 注意：所有型号代码都经过简化，整个工作范围更大。

Answer 1

禁用的元素不会触发任何鼠标事件。因此，即使从禁用选择框中也无法捕获单击。您可以在其周围保留一个包装器div，然后在其上放置onclick事件，您可以使用.siblings()获取select元素并检查它是否已禁用属性。启用select时，必须删除包装器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>

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

1 个答案: