Question

我想在单击按钮上禁用并启用div（在div中我有两个文本框），我想更改按钮名称也像＆＃34;如果我单击禁用按钮它应该禁用文本框和禁用名称应该变为启用和vise verso＆＃34;。可以帮助一些人吗？。

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代码

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

我有两个带日历的文本框。问题是即使在禁用后我也可以从日历中选择日期

Answer 1

@saranya
已禁用的属性不属于div element的W3C规范，仅适用于form elements。

如果你想启用禁用div，那么应该启用禁用具有该div的所有控制元素。我已经使用 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;
                    }
            } 
    }

Answer 2

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

如何禁用和启用图像？

2 个答案: