Geek Answers Handbook

How can I turn off controls to enable Javascript

I made the code to disable the control when the user clicks on the control. In my form I have TextBoxand DropDown. When the user clicks on TextBoxI will disable DropDown, as when clicking on DropDown, I disconnect TextBox, which works fine.

But when the user clicks on the control Disabled, I would like to enable this control. So if I click on TextBoxwhich was disabled, I would like Enableto do it for DropDowntoo ..

My example script is as follows

<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>

Design

<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>
+5
source share
3 answers

, div , div onclick.

, div . , .

, . RED 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>
+2

-, Firefox , , , DOM- , , , , DOM.

, - , , , .

, , , click.

+4

You mean

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>
0
source

More articles:


All Articles