How to disable and enable a image?

Question

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

Answer 1

@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;
                    }
            } 
    }