CODEWITHSUNDEEP
javascript
saranya
saranya

Reputation: 163

How to disable and enable a image?

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

Upvotes: 8

Views: 4601

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

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

Upvotes: 2

Luke
Luke

Reputation: 1724

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

Upvotes: 1

Related Questions