Làm thế nào để vô hiệu hóa và kích hoạt một hình ảnh?

Question

Tôi muốn tắt và bật div (bên trong div tôi có hai hộp văn bản) trên một lần nhấp nút và tôi muốn thay đổi tên nút cũng như "nếu tôi nhấp vào nút vô hiệu hóa, nó sẽ tắt hộp văn bản và tắt tên sẽ trở thành cho phép và vise verso ". có thể giúp đỡ một số ?.

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]); 

     } 
    } 
} 

Mã Html

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

tôi có hai textbox với calendars.the vấn đề là ngay cả sau khi vô hiệu hóa i am có thể chọn ngày từ lịch

Answer 1

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

Answer 2

@saranya
Thuộc tính bị vô hiệu hóa không phải là một phần của thông số W3C cho div element, chỉ dành cho form elements.

Vâng, nếu bạn muốn bật tính năng vô hiệu hóa div, bạn nên bật tính năng div tất cả các yếu tố kiểm soát với div đó. Tôi đã đạt được bằng cách sử dụng sau đây bằng cách sử dụng 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; 
        } 
      } 
    }