I would like to disable and enable a div (inside a div i have two text box) on a single button click and i would like change the button name also like "if i click disable button it should disable the text box and disable name should bee enable and vise verso".can some one help?.

function san() {
    san1(document.getElementById("div1"));
}

function san1(el) {
    try {
        el.disabled = el.disabled ? false : true;
    } catch (E) {}
    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            san1(el.childNodes[x]);

        }
    }
}

Html Code

<div id="div1">
   <table>
      <tr>
         <td >
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
         </td>
         <td>
            <asp:TextBox ID="txtStartDate" class="MyTestClass"  runat="server" ></asp:TextBox>
            <asp:HyperLink ID="hypCalenStart" runat="server" ImageUrl="~/images/ico-cal.gif"></asp:HyperLink>
            <ajax:CalendarExtender ID="StartDatePicker" runat="server" PopupButtonID="hypCalenStart"
               TargetControlID="txtStartDate" SelectedDate='<%# Datetime.Today() %>' Format="MM/dd/yyyy">
            </ajax:CalendarExtender>
         </td>
         <td >
            <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
         </td>
         <td>
            <asp:TextBox ID="txtEndDate" class="MyTestClass" runat="server"  ></asp:TextBox>
            <asp:HyperLink ID="hypCalenEnd" runat="server"  ImageUrl="~/images/ico-cal.gif"></asp:HyperLink>
            <ajax:CalendarExtender ID="EndDatePicker"  runat="server" PopupButtonID="hypCalenEnd"
               TargetControlID="txtEndDate" SelectedDate="<%# Datetime.Today() %>" Format="MM/dd/yyyy">
            </ajax:CalendarExtender>
         </td>
         <td colspan=2 align="center">
            <asp:Button ID="cycloneenable"  OnClientClick="validate(1);" runat="server" Text="Enable" />
         </td>
      </tr>
   </table>
</div>
<input type="button" value="Disable" onclick= "san()"/>

i have two textbox with calendars.the problem is even after disable i am able to select the date from the calender

I would like to disable and enable a div (inside a div i have two text box) on a single button click and i would like change the button name also like "if i click disable button it should disable the text box and disable name should bee enable and vise verso".can some one help?.

function san() {
    san1(document.getElementById("div1"));
}

function san1(el) {
    try {
        el.disabled = el.disabled ? false : true;
    } catch (E) {}
    if (el.childNodes && el.childNodes.length > 0) {
        for (var x = 0; x < el.childNodes.length; x++) {
            san1(el.childNodes[x]);

        }
    }
}

Html Code

<div id="div1">
   <table>
      <tr>
         <td >
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
         </td>
         <td>
            <asp:TextBox ID="txtStartDate" class="MyTestClass"  runat="server" ></asp:TextBox>
            <asp:HyperLink ID="hypCalenStart" runat="server" ImageUrl="~/images/ico-cal.gif"></asp:HyperLink>
            <ajax:CalendarExtender ID="StartDatePicker" runat="server" PopupButtonID="hypCalenStart"
               TargetControlID="txtStartDate" SelectedDate='<%# Datetime.Today() %>' Format="MM/dd/yyyy">
            </ajax:CalendarExtender>
         </td>
         <td >
            <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
         </td>
         <td>
            <asp:TextBox ID="txtEndDate" class="MyTestClass" runat="server"  ></asp:TextBox>
            <asp:HyperLink ID="hypCalenEnd" runat="server"  ImageUrl="~/images/ico-cal.gif"></asp:HyperLink>
            <ajax:CalendarExtender ID="EndDatePicker"  runat="server" PopupButtonID="hypCalenEnd"
               TargetControlID="txtEndDate" SelectedDate="<%# Datetime.Today() %>" Format="MM/dd/yyyy">
            </ajax:CalendarExtender>
         </td>
         <td colspan=2 align="center">
            <asp:Button ID="cycloneenable"  OnClientClick="validate(1);" runat="server" Text="Enable" />
         </td>
      </tr>
   </table>
</div>
<input type="button" value="Disable" onclick= "san()"/>

i have two textbox with calendars.the problem is even after disable i am able to select the date from the calender

• javascript

• 1 Share what you've tried (code, any output/errors, unexpected behaviour), and what you've searched for! – Luke Commented Jun 25, 2015 at 4:37
• @Luke:i have given code pls do see – saranya Commented Jun 25, 2015 at 4:52
• Okay, so the logic is, recursively disable all children? What are the children (show HTML)? What happens if you remove the try-catch so as to not suppress errors? – Luke Commented Jun 25, 2015 at 5:19
• @Luke:i have added the html – saranya Commented Jun 25, 2015 at 5:38
• @saranya have a look here – Nagaraj S Commented Jun 25, 2015 at 5:45

2 Answers 2

@saranya
The disabled attribute is not part of the W3C spec for div element, only for form elements.

Well if you want to enabled disabled the div, one should enabled disabled the all control elements withing that div. I have achieved using following way using JavaScript.

HTMl

<input type="button" value="Disable" id="enable-disable""/>

     <div class="two-text-box-div" >    
        inside a div i have two text box
        <input type="text" name"one" class="enable-disable-textbox">
        <input type="text" name"two" class="enable-disable-textbox">
     </div>

JS

window.onload = function(){ 
            var btnEnableDisable = document.getElementById('enable-disable');
            var divTwoTextBoxDiv = document.getElementsByClassName('enable-disable-textbox');
            btnEnableDisable.onclick = function(){

                if(btnEnableDisable.value=='Disable'){
                    btnEnableDisable.value = 'Enable';
                    enbaleDisableDiv(true)

                }else{
                    btnEnableDisable.value = 'Disable';
                    enbaleDisableDiv(false)
                }
            }

            var enbaleDisableDiv = function(boolVal){
                for (var key in divTwoTextBoxDiv) {
                        divTwoTextBoxDiv[key].disabled = boolVal;
                    }
            } 
    }

HTML

<input id="myInput" type="text">
<button id="myButton" onclick="handleOnClick()">Disable</button>

JS

function handleOnClick() {
    var input = document.getElementById('myInput'),
        button = document.getElementById('myButton');
    input.disabled = !input.disabled;
    button.innerHTML = input.disabled ? "Enable" : "Disable";
}