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

Share what you've tried (code, any output/errors, unexpected behaviour), and what you've searched for! — Luke, Jun 25 '15 at 04:37
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, Jun 25 '15 at 05:19
@saranya [have a look here](http://stackoverflow.com/questions/8423812/enable-disable-a-div-and-its-elements-in-javascript) — Nagaraj S, Jun 25 '15 at 05:45
Divs don't have a `disabled` attribute. You will need to disable the inputs. — Bergi, Jun 25 '15 at 06:14
@Bergi :yes...the problem for me is I have a popup calendar on calendar image click it will place the date in the text box .i can disable the text box .but the calendar is still enabled and if i select the date from calendar it places the date in disabled text box. — saranya, Jun 25 '15 at 06:39
@saranya: Then make your image click handler respect the disabled property — Bergi, Jun 25 '15 at 06:40

score 2 · Answer 1 · answered Jun 25 '15 at 05:57

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

:I have a popup calendar on calendar image click it will place the date in the text box .the code you have given disables the textbox.but the calendar is still enabled and if i select the date from calendar it places the date in disabled textbox. — saranya, Jun 25 '15 at 06:33
@saranya there is no disabled attribute associated with image. please check here http://www.w3schools.com/jsref/dom_obj_image.asp . you have to hide that calendar so it not visible to end user on disable activity and show it again on enable activity. — RIYAJ KHAN, Jun 25 '15 at 07:01

score 1 · Answer 2 · answered Jun 25 '15 at 04:36

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

How to disable and enable a image?

2 Answers2