`

checkBox点击相应内容变恢色

 
阅读更多

有时候在做registration的时候,会遇到点击agree的时候为可点击,不点击agree的checkbox的时候,为灰色不可点击。

html代码如下:

<p>
   <input id="agree" name="agree" value="1" onclick="onAgreeChecked()" type="checkbox">
   <label id="agreeLabel" for="agree">I have read and agree with the above terms and conditions</label>
</p>
<p id="bitpicker" style="">
  <input id="32" onclick="onAgreeChecked()" name="bit" value="32" type="radio">
  <label for="32">32-bit</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input id="64" onclick="onAgreeChecked()" name="bit" value="64" type="radio">
    <label for="64">64-bit</label>
</p>
<p>
  <a name="#win-bundle" bundle="true" href="" class="button disabled" id="downloadForRealz" onclick="return onDownloadForRealz(this);">Download Eclipse ADT with the Android SDK for Windows</a>
</p>

 js代码如下:

function onAgreeChecked() {
    /* verify that the TOS is agreed and a bit version is chosen */
    if ($("input#agree").is(":checked") && $("#bitpicker input:checked").length) {

      /* if downloading the bundle */
      if ($("#downloadForRealz").attr('bundle')) {
        /* construct the name of the link we want based on the bit version */
        linkId = $("a#downloadForRealz").attr("name") + $("#bitpicker input:checked").val();
        /* set the real url for download */
        $("a#downloadForRealz").attr("href", $(linkId).attr("href"));
      }

      /* reveal the download button */
      $("a#downloadForRealz").removeClass('disabled');
    } else {
      $("a#downloadForRealz").addClass('disabled');
    }
  }

 

css样式:

.button.disabled, .button.disabled:hover, .button.disabled:active{
	background: none repeat scroll 0 0 #ebebeb;
    border-color: #999;
    color: #999 !important;
    cursor: default;
}

 

 

 

 

分享到:
评论

相关推荐

    PB 11.5 CheckBox三种状态的实例

    本实例将详细讲解如何实现CheckBox控件的三种状态:未选中、已选中以及灰色禁用状态,并探讨它们在实际应用中的配置和事件处理。 1. CheckBox的基本结构: CheckBox控件在界面中通常表现为一个小方框,里面可能有...

    vs2008演示CheckBox复选框控件的使用实例

    - `ThreeState`:如果设为`True`,CheckBox将具有第三个状态——灰色,表示不确定或未知状态。 - `AutoCheck`:默认情况下,当用户点击CheckBox时,`Checked`属性会自动更新。设置为`False`可禁用此行为。 - `...

    vc2005--CheckBox的使用

    4. **Enabled**:控制CheckBox是否可操作,当设置为FALSE时,CheckBox将变为灰色,用户无法进行选择。 5. **Visible**:决定CheckBox是否可见,设置为FALSE则CheckBox在界面上不可见。 为了响应CheckBox状态的改变...

    jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    本文所要介绍的知识点是使用jQuery实现点击DIV时同时触发CheckBox的选择,并根据CheckBox的选中状态改变DIV的背景色。这个实例具有很高的实用价值,通过编写jQuery脚本来控制元素的交互行为,适用于需要增强用户界面...

    带三态checkbox的treeview

    2. 事件处理程序:当用户点击复选框时,需要有相应的事件处理程序来更新节点的状态,并可能递归地更新其所有子节点的状态。 3. 数据绑定:可能使用某种数据结构(如列表或自定义对象)来存储节点信息,包括它们的...

    MAC风格的checkbox,button,radiobox

    按钮的默认状态可能是浅灰色,鼠标悬停时颜色会变深,点击时则呈现按下状态,显示更深层次的阴影。此外,MAC的按钮还支持各种状态,如禁用状态、加载中状态等,每种状态都有相应的视觉提示。 3. **MAC风格的单选框...

    CListCtrl Checkbox

    标题中的"CListCtrl Checkbox"指的是在CListCtrl控件中添加复选框功能,使用户可以通过点击复选框来选择列表中的特定项。这个功能在很多需要用户进行多项选择的界面中非常常见,如设置选项、任务管理等。 首先,...

    易语言-XP选择框1.1CHECKBOX

    当用户点击CHECKBOX时,会触发Click事件,可以在此事件中编写相应逻辑。而StateChange事件则在用户改变CHECKBOX的状态(勾选或取消)时触发,你可以利用这个事件来更新程序的其他部分。 3. **属性设置**:可以通过...

    css3复选框选中变灰特效.zip

    当用户点击复选框时,`:checked`状态会被激活,我们可以利用这个状态来改变复选框的外观。 ```css input[type="checkbox"]:checked { /* 在这里添加选中后的样式 */ } ``` 接着,我们可能需要使用jQuery来处理...

    JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    在本文中,我们将详细探讨如何使用JavaScript实现点击复选框将按钮或文本框变为灰色不可用的功能。 首先,我们需要了解HTML中的复选框(checkbox)和按钮(button)元素。复选框是一种允许用户进行多重选择的表单...

    treeview 复选框 三种状态

    当需要在TreeView中添加可选功能时,复选框的引入就变得尤为重要。本主题将深入探讨“treeview 复选框 三种状态”,以及如何在实际应用中实现和管理这些状态。 1. TreeView 复选框概述: TreeView控件的复选框功能...

    JAVA实现五子棋设计源代码.doc

    - `actionPerformed`:处理按钮点击事件,根据用户点击的是哪个按钮执行相应的操作,如开始游戏、结束游戏或重置游戏。 - `mouseClicked`:处理鼠标点击事件,获取鼠标点击的位置并判断是否可以落子。 8. **...

    《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面2.pdf

    - 登录按钮初始为灰色不可点击状态,当输入内容后变为可点击。 - 提供手机快速注册、企业用户注册和找回密码的链接。 - 底部包含微信和QQ第三方登录选项。 **手机号注册设计**: - 用户可以通过手机号进行快速注册...

    Js常用代码集合.doc

    7. 表单细边框(得到焦点改变样式):当输入框获得焦点时,其边框颜色变为蓝色,失去焦点后恢复为灰色。这通过`onfocus`和`onblur`事件处理函数实现。 8. 文本框失去焦点后进行表单验证:此部分代码演示了如何在...

    VB控件教程大全.rar

    - **Enabled**: 控件是否可用,False则变为灰色不可点击。 - **Visible**: 控件是否可见。 - **ForeColor**: 控件文本的颜色。 - **BackColor**: 控件背景颜色。 - **Font**: 控件字体的样式、大小和颜色。 - **...

    JS实现黑色风格的网页TAB选项卡效果代码

    这个效果使得用户可以通过点击不同的菜单选项来显示相应的内容区域,为网站或应用程序提供了一个简洁且直观的交互界面。 首先,我们需要理解HTML结构。在这个例子中,HTML包含了两个主要部分:`.main .menu` 和 `....

    测试用例实例

    - `00001` 无列表页面导航栏测试:验证导航链接点击后是否能正确跳转至相应页面,确保用户可以通过导航栏流畅地在应用中移动。 - `00010` 信息汇报页面导航栏测试:检查导航链接与页面模块名称的一致性,以及点击...

    QCheckBox.7z

    `QCheckBox`是Qt库中的一个核心部件,它用于创建可复选的选项,用户可以点击来选中或取消选中,通常用在多选列表中。 1. **QCheckBox基本概念**: `QCheckBox`是Qt中的一个继承自`QAbstractButton`的类,它提供了...

    VC++ 复选框控件视频

    4. **Enabled**:控制复选框是否可被用户操作,当设置为FALSE时,复选框将变为灰色,不可点击。 5. **Font**和**Color**:定义字体和背景颜色,可以自定义以适应界面风格。 **事件处理** 复选框控件的典型事件有: ...

Global site tag (gtag.js) - Google Analytics