复合按钮

因为本 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的值。