如何使用Javascript使禁用的控件重新启用

How can i make a disabled control back to enable using Javascript

本文关键字：新启用 启用 控件 Javascript 何使用      更新时间：2023-09-26

我已经编写了一段代码，当用户单击控件时禁用该控件。在我的表格上，我有一个TextBox和一个DropDown。当用户单击TextBox时，我将disable，DropDown，就像单击DropDown时一样，我将禁用工作正常的TextBox。

但是当用户点击Disabled控件时，我希望启用该控件。意味着如果我点击被禁用的TextBox，我想Enable，它也和dropdown一样。。

我的示例脚本如下

<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
 document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
 document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>

设计

<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
        <asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
        </asp:DropDownList>

显然，Firefox和其他浏览器会在被禁用的表单字段上禁用DOM事件，并且从禁用的表单域开始的任何事件都会被完全取消，不会向DOM树传播。

因此，如果你想实现这样的目标，你可能必须采取变通办法。

与其实际禁用字段，不如尝试将字段设置为禁用状态，这样您仍然可以捕获单击事件。

我们的想法是在下拉列表前面放置一个div，这个div接受onclick事件。

这里的问题是div不能如此容易地放在下拉列表前面。要放置它，你需要动态地这样做，并使用绝对位置。

我在这里制作了一个小代码，并对其进行测试和工作。我在div上留下了背景颜色RED，看看它在哪里。一些细节我留给了你，例如，为了找到你的控制列表的宽度和高度，我放置了onclick，你可以放回双击，然后删除红色背景。

<script type="text/javascript">
function toggleDropDownList1()
{
    var MyDiv = document.getElementById("DivForClick");
    MyDiv.style.display = "none";
    var d=document.getElementById("<%= DropDownList4.ClientID %>");
    if(d.disabled)
    {
        d.disabled=false;
    }
    else
    {
        document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
    }
}
function toggleDropDownList2()
{
    document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
    var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
    var MyDiv = document.getElementById("DivForClick");
    MyDiv.style.display = "block";
    MyDiv.style.left = MyDdl.style.left;
    MyDiv.style.top = MyDdl.style.top;
    // need to find the height/width
    // MyDiv.style.height = MyDdl.style.height;
    // MyDiv.style.width = MyDdl.style.width;   
}
</script>

以及asp代码。

<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
   <asp:ListItem Text="One" Value="1"></asp:ListItem>
   <asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>

你是说吗

function toggleIt() {
  var d=document.getElementById("<%= DropDownList4.ClientID %>");
  var t =document.getElementById("<%= TextBox1.ClientID %>");
  d.disabled=!d.disabled
  t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
    <asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
    </asp:DropDownList>
相关文章：