我如何才能使已禁用的控件恢復為使用Java來啟用

Question

我已經完成了一個代碼，可以在用戶單擊控件時禁用該控件。 在我的表單上，我有一個TextBox和一個DropDown 。 當用戶單擊TextBox我將disable DropDown就像單擊DropDown我將禁用TextBox ，它可以正常工作。

但是，當用戶單擊“ Disabled控件”時，我想啟用該控件。 意味着如果我單擊已禁用的TextBox ，我也想為dropdown Enable它。

我的示例腳本如下

<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

顯然，Firefox和其他瀏覽器會在已禁用的表單字段上禁用DOM事件，並且任何從禁用的表單字段開始的事件都會被完全取消，並且不會在DOM樹上傳播。

因此，如果您想實現這樣的目標，則可能必須采取解決方法。

與其實際禁用該字段，不如嘗試設置這些字段的樣式以使其看起來好像已被禁用，而是可以捕獲單擊事件。

Answer 2

這個想法是在下拉列表的前面放置一個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> 

Answer 3

你的意思是

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>