在HTML上启用禁用文本框复选框检查已更改的事件 [英] Enable disable textbox on HTML checkbox check changed event

问题描述

我有一个HTML复选框，其值与angularjs ng-model绑定。

我想根据复选框的值启用或禁用HTML文本框。



页面加载时，复选框的值可能为true或false。因此，也应启用或禁用文本框。



当用户选中/取消选中复选框时，文本框也应启用或禁用。



这是我的HTML页面：

 <  表    class   =  tblDataEntry >  
 <   tr  >  
 <   td     class   =  tdCheck    colspan   =  2 >  
 <   input    类型  = 复选框    id   =  chkDashboard    data-ng-model   =  PropCollection.IsDashboardConfigured      enableviewstate   =  true    tabindex   =  6    onclick   =  javascript：SetDashboardControlsEnable（this）;    ondblclick   =  alert（）;     /  > 信息中心
 <   / td  >  
 <   / tr  >  
 <   tr  > ;  
 <   td     class   =  tdLabel > 服务器名称：<   / td  >  
 <   td     class   =  tdField >  
 <  输入    type   =  text   < span class =code-attribute> id   =  txtDash BoardServerName    data-ng-model   =   PropCollection.ServerName    clientidmode   = 静态    runat   =  server    class   =  aspTextbox    tabindex   =  7    maxlength   =  255    /  >  
 <   / td  >  
 < span class =code-keyword><   / tr  >  
 <   / table  >  

我尝试过：



我尝试在复选框的onclick事件上调用javascript函数。但事件不会触发。

解决方案

嗯，这似乎是一种奇怪的方式！ AngularJS使用 ngDisabled [ ^ ]指令：

 <  表    class   =  tblDataEntry >  
 <   tr  >  
 <   td     class   =  tdCheck    colspan   =  2 >  
 <  输入   类型  = 复选框     id   = < span class =code-keyword> chkDashboard    data-ng-model   =  PropCollection.IsDashboardConfigured      enableviewstate   =  true    tabindex   =  6    /  > 信息中心
  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     class   =  tdLabel > 服务器名称：<   / td  >  
 <   td     class   =  tdField  >  
 <  输入   类型  =  text    id   =  txtDashBoardServerName    data-ng-model   =  PropCollection.ServerName    data-ng-disabled   = ！PropCollection.IsDashboardConfigured    clientidmode   = 静态    runat   =  server    class   =  aspTextbox    tabindex   =  7    maxlength   =  255    /  >  
 <   / td  >  
 <   / tr  >  
 <   / table  >  

Hi,
I have a HTML checkbox whose value bind from angularjs ng-model.
I want to enable or disable the HTML textbox according to that value of checkbox.

When page loads, value of checkbox may be true or false. Accordingly textbox should also be enabled or disabled.

And when user checks/unchecks the checkbox, the textbox should also get enabled or disabled.

This is my HTML page:

<table class="tblDataEntry">
 <tr>
     <td class="tdCheck" colspan="2">
        <input type="checkbox" id="chkDashboard" data-ng-model="PropCollection.IsDashboardConfigured"  enableviewstate="true" tabindex="6" onclick="javascript:SetDashboardControlsEnable(this);" ondblclick="alert();" />Dashboard		
     </td>
 </tr>
 <tr>
     <td class="tdLabel">Server Name:</td>
     <td class="tdField">
        <input type="text" id="txtDashBoardServerName" data-ng-model="PropCollection.ServerName" clientidmode="Static" runat="server" class="aspTextbox" tabindex="7" maxlength="255" />
     </td>
 </tr>
</table>

What I have tried:

I tried calling a javascript function on onclick event of the checkbox. But event does not fire.

解决方案

Well that seems like an odd way to do it! AngularJS handles this sort of thing for you automatically, using the ngDisabled[^] directive:

<table class="tblDataEntry">
 <tr>
     <td class="tdCheck" colspan="2">
        <input type="checkbox" id="chkDashboard" data-ng-model="PropCollection.IsDashboardConfigured"  enableviewstate="true" tabindex="6" />Dashboard		
     </td>
 </tr>
 <tr>
     <td class="tdLabel">Server Name:</td>
     <td class="tdField">
        <input type="text" id="txtDashBoardServerName" data-ng-model="PropCollection.ServerName" data-ng-disabled="!PropCollection.IsDashboardConfigured" clientidmode="Static" runat="server" class="aspTextbox" tabindex="7" maxlength="255" />
     </td>
 </tr>
</table>

这篇关于在HTML上启用禁用文本框复选框检查已更改的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！