Wie kann ich ein Bild deaktivieren und aktivieren?

Question

Ich möchte einen div deaktivieren und aktivieren auf einen Klick einzigen Taste (innerhalb eines div Ich habe zwei Textfeld), und ich möchte den Namen der Schaltfläche auch ändern, wie „wenn i-Taste deaktivieren, klicken Sie auf das Textfeld deaktivieren sollte und deaktivieren Name sollte aktivieren und vise verso ".kann jemand helfen ?.

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()"/> 

ich habe zwei Textbox mit calendars.the Problem ist auch nach disable ich in der Lage bin das Datum aus dem Kalender

Answer 1

HTML

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

wählen

JS

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

Answer 2

@saranya
Das deaktivierte Attribut ist nicht Teil der W3C-Spezifikation für div element, nur für form elements.

Nun, wenn Sie deaktiviert die div deaktivieren möchten, sollte man deaktiviert die alle Steuerelemente mit diesem Div aktivieren. Ich habe erreicht, indem folgende Art und Weise unter Verwendung von 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; 
        } 
      } 
    }