我怎样才能使一个禁用控制回到使用Javascript

Question

我已经做了一个代码来禁用控件时，用户点击一个控件。在我的表格上，我有一个TextBox和一个DropDown。当用户点击一个TextBox我将disableDropDown就像那样当点击DropDown我会禁用TextBox它工作正常。

但是，当用户点击Disabled控制我想启用该控件。也就是说，如果我在其上禁用我想Enable这样说，这对dropdown太TextBox点击..

我的示例脚本如下

<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上留下了背景颜色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> 

Answer 2

你的意思

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> 

Answer 3

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

因此，如果您想要实现这样的目标，您可能需要采取一种解决方法。

而不是实际禁用该字段尝试设置样式字段看起来就像他们被禁用，这样你仍然可以捕获点击事件。