• jQuery设置单选按钮radio选中/不可用的实例

    attr()的使用
    服务器君一共花费 26.294 ms 进行了 4 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    因为本 part 是“jQuery日常使用篇”,所以都是由具体需求出发,总结需要用到的知识点。代码写得未必很好,达到目标就好。那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样。

    我们先来看看演示效果:

    我们接下来看看jQuery对单选按钮 radio 的操作。

    1. 彩色处于关闭的时候色块不可用

    需要两步,当页面打开时,检测如果彩色关闭的话,让色块的“开”不可用:

    if($("#coloroff[checked]"))
    {
    	//alert("Hello Nowamagic!");
    	$("#blockon").attr("disabled", true);
    }
    

    另外,当彩色开关切换时,即从开切换关时,让色块开不可用,同时选中色块关:

    $("#coloroff").change(function(){
    	$("#blockon").attr("disabled", true);
    	$("#blockoff").attr("checked",true);
    })
    

    2. 当彩色从关切换开时,让色块可用,这很简单:

    $("#coloron").change(function(){
    	$("#blockon").attr("disabled", false);
    })
    

    全部代码为:

    $(document).ready(function(){
    	if($("#coloroff[checked]"))
    	{
    		//alert("Hello Nowamagic!");
    		$("#blockon").attr("disabled", true);
    	}
    	$("#coloroff").change(function(){
    		$("#blockon").attr("disabled", true);
    		$("#blockoff").attr("checked",true);
    	})
    	$("#coloron").change(function(){
    		$("#blockon").attr("disabled", false);
    	})
    });
    

    补充几个知识点:

    1. checkbox, radio 这些控件都没有readonly属性,需要用 disabled 属性来切换它们的“可用/不可用”状态。
    2. 设置 radio 不可用可以用 attr() 方法,即attr("disabled", true)。
    3. 设置 radio 的选中状态也是用 attr() 方法,attr("checked",true)。

    大概就这样。更多关于 radio 的操作可以参考 使用val()选中select/checkbox/radio的值

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [软件工程与项目管理] 浏览器的HTML解析器 8 个条目
  2. [PHP程序设计] PHP数组的遍历 7 个条目
  3. [Python程序设计] Python数据类型 11 个条目
  4. [移动开发] Activity 初步知识 2 个条目
  5. [移动开发] Android 开发调试工具 ADB 3 个条目
  6. [PHP程序设计] PHP中的Hash算法 3 个条目
  7. [数据库技术] 无限级分类数据表设计 4 个条目
  8. [JavaScript程序设计] Web实时通信技术名词解析 5 个条目
  9. [移动开发] Layout_weight属性解析 5 个条目
  10. [数据库技术] MySQL常用自带函数 3 个条目
  11. [数据库技术] MySQL中英文混合排序 4 个条目
  12. [PHP程序设计] httpd.conf设置相关 3 个条目
窗口 -- [协会]