如何将禁用的控件重新启用以启用Javascript

Question

我已经完成了一个代码,用于在用户单击控件时禁用控件.在我的表格上我有一个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>

Answer 1

这个想法是在下拉列表前面放置一个 div，并且该 div 接受 onclick 事件。

这里的问题是 div 不能那么容易地放置在下拉列表前面。要放置它，您需要动态地执行此操作并使用绝对位置。

我在这里编写了一个小代码，并对其进行了测试和工作。我在 div 上保留了背景颜色红色，以查看它在哪里。一些细节我留给了你，例如要找到你的控制列表的宽度和高度，我放置了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>