Question

我试图根据变量的值有条件地启用或禁用HTML输入。 “禁用”部分运行良好，但“启用”不是，我无法弄清楚原因。

代码：

<--if variable is true...-->
<div id="disabledSearch" class="searchBox disabled">
    <script type="text/javascript">
        $('#disabledSearch :input').attr('disabled', true); 
    </script>

<--if variable is false-->
<div id="enabledSearch" class="searchBox">
    <script type="text/javascript">
        //This line isn't working:  
        $('#enabledSearch :input').removeAttr('disabled');
    </script>

Answer 1

我玩了一下这个 - 请查看http://jsbin.com/ayoye3

input.attr('disabled',true)和input.attr('disabled',false)成功切换输入。

唯一的可能是您没有选择正确的元素，因此代码似乎不起作用。确保您的选择器正在选择正确的节点，或者在此处共享更多代码 - 您可能需要将函数放在$(function() { ... })包装器中，以确保它们仅在加载DOM后才执行。

另外，您是否收到任何与js相关的浏览器错误？

Answer 2

而不是removeAttr 试试

$('#enabledSearch :input').attr('disabled', false);

注意：只是一个建议，但您应该在$（document）.ready（）函数中执行此操作。这将清理你拥有的一些重复代码。

<强>被修改

查看将代码迁移到$（document）.ready（function（）{}）;并根据条件使用$ .toggle（）函数在输入上切换禁用。请注意，如果条件仅在服务器端引用，则可以通过将其放在隐藏的输入中来公开客户端上的标志。

我个人会这样做，假设你在div下有一个有效的输入

<div id="searchDiv" class="searchBox <%=SearchIsDisabled ? "disabled" : "enabled"%>"> 
    <input name="myinput" value="" type="text" />
</div>

<script type="text/javascript"> 
        $(document).ready(function () {
           $("#searchDiv.disabled input).attr('disabled', true);
           $("#searchDiv.enabled input).attr('disabled', false);
        })
</script>

Answer 3

谢谢@pointy - 我现在改变了订单

编辑：我似乎无法找到@pointy的评论给了我这个想法。但是，解决方案是我改变了页面上元素和javascript的顺序。

坚持使用JQuery有条件地启用或禁用输入

3 个答案: