我怎樣才能使一個禁用控制回到使用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樹。

因此，如果您想要實現這樣的目標，您可能需要採取一種解決方法。

而不是實際禁用該字段嘗試設置樣式字段看起來就像他們被禁用，這樣你仍然可以捕獲點擊事件。