Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.

But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..

My sample Script is as follows

XML
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
MyDiv.style.display = "none";

var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
    d.disabled=false;
    document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
}

 function toggleDropDownList2()
{
var MyDiv = document.getElementById("Div1");
var MyDdl = document.getElementById("<%= TextBox1.ClientID %>");
MyDiv.style.display = "none";

var d=document.getElementById("<%= TextBox1.ClientID %>");
if(d.disabled)
{
    d.disabled=false;
    document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
else
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
}
</script>

<div id="Div1" onclick="toggleDropDownList2();" style="z-index: 999; position: absolute;
            left: 71px; top: 17px; height: 20px; width: 40px; display: none;">
        </div>
        <asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
        <br />
        <br />
        <div id="DivForClick" onclick="toggleDropDownList1();" style="z-index: 999; position: absolute;
            left: 13px; top: 61px; height: 20px; width: 40px; 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>



But i am unable to get the one as per required can any one help me
Posted

Try this
XML
<div id="divval" onclick="CheckStat();"  >
    <asp:TextBox ID="txtTest" runat="server" ></asp:TextBox>
   </div>


XML
<script type="text/javascript" language="javascript">
        function CheckStat() {
            var txtId = document.getElementById('<%=txtTest.ClientID%>');
            alert(txtId.disabled);
            if (txtId.disabled == true) {
                txtId.disabled = false;
            }
            else {
                txtId.disabled = true;
            }
        }
    </script>

If you click outside, near textbox, it will work. You can adjust the UI
 
Share this answer
 
Comments
demouser743 12-Jan-12 3:51am    
I think you didn't get my requirement.. I am having 2 controls Textbox and a dropdown. when i click on either one will get disabled. When one get disabled and when i click on that control again i would like to enable that and disable the other
Anuja Pawar Indore 12-Jan-12 7:35am    
I got that, but u can write drop down disable =disabled in the if statement. Still i have added the code.
XML
<div id="divval" onclick="CheckStat();"  >

   <asp:TextBox ID="txtTest" runat="server" ></asp:TextBox>
  </div>
  <div id="div1" onclick="CheckStat();">
  <asp:DropDownList ID="drp1" runat="server" >
  <asp:ListItem Text="one"></asp:ListItem>
  <asp:ListItem Text="two"></asp:ListItem>
  </asp:DropDownList>
  </div>

XML
<script type="text/javascript" language="javascript">
        function CheckStat() {
            var txtId = document.getElementById('<%=txtTest.ClientID%>');
            var drpId = document.getElementById('<%=drp1.ClientID%>');
            alert(txtId.disabled);
            if (txtId.disabled == true) {

                txtId.disabled = false;
                drpId.disabled = "disable";
            }
            else {

                txtId.disabled = true;
                drpId.disabled = "";
            }
        }
    </script>
 
Share this answer
 
 
Share this answer
 
Comments
demouser743 12-Jan-12 3:03am    
But when disabling the textbox and again clicking on it doesn't enable the control right..
XML
<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;
        document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
    }
    else
    {
        document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
    }
    var MyDdl = document.getElementById("<%= TextBox1.ClientID %>");
    var MyDiv = document.getElementById("DivForClick1");

    MyDiv.style.display = "block";
    MyDiv.style.left = MyDdl.style.left;
    MyDiv.style.top = MyDdl.style.top;
}

function toggleDropDownList2()
{
var MyDiv = document.getElementById("DivForClick1");
    MyDiv.style.display = "none";
    var d=document.getElementById("<%= TextBox1.ClientID %>");
    if(d.disabled)
    {
        d.disabled=false;
        document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
    }
    else
    {
        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>


XML
<form id="form1" runat="server">
        <div id="DivForClick1" onclick="toggleDropDownList2();" style="z-index: 999; position: absolute;
            left: 0; top: 0; height: 20px; width: 40px; display: none;">
        </div>
        <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; 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>
    </form>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900