html页面复选框的问题

我想让如果你选择第一个全部地区，然后下面的地区都不能选择，如果不选择全部地区，则可以选择下面的地区，而且可以多选，求教可以怎么做，感谢

<tr  class="mainlisttitle">
 <td align="right" class="mainlistb" style="width:20%">地区范围:</td>      
                        <td style="text-align:left;" class="mainoutbg" >
                     <input type="checkbox"  name="checkbox" value="0" />全部地区    
                      <input type="checkbox"  name="checkbox" value="1" >衢州 
                      <input type="checkbox"  name="checkbox" value="2" >杭州
                      <input type="checkbox"  name="checkbox" value="3" >湖州
                      <input type="checkbox"  name="checkbox" value="4" >嘉兴
                      <input type="checkbox"  name="checkbox" value="5" >宁波
                       <input type="checkbox"  name="checkbox" value="6">绍兴
                       <input type="checkbox"  name="checkbox" value="7">台州 
                      <input type="checkbox"  name="checkbox" value="8" >温州
                       <input type="checkbox"  name="checkbox" value="9">丽水
                       <input type="checkbox"  name="checkbox" value="10">金华 
                      <input type="checkbox"  name="checkbox" value="11" >舟山
                       <input type="checkbox"  name="checkbox" value="12">海口市                           
                        </td>   
                         </tr> 

---

你需要一个数组 存已选择的id，当点击全选时，把所有id都加进去，再点击全选，清空列表，点击复选框，把当前id加到数组里。

就这么个逻辑~

---

<input type="checkbox" name="checkbox" value="0" />全部地区
那么这个名字可以修改一下，顺便加个 ID，改成
<input type="checkbox" name="checkboxall" id=‘cbctrl’ value="0" />全部地区

然后给这个元素绑定onchange 函数。在页面被加载之后绑定。

$(function(){
   //绑定事件
    $('#cbctrl').on('change', function() {
        //判断是否被选中
        if($(this).attr('checked')){
            //根据名字进行查找并且设置为不可选择
            $("input[name='checkbox']").attr('disabled', true);
        }else{
            $("input[name='checkbox']").attr('disabled', false);
        }
    });
});

代码随便写了几段，没测试过，也不算是完全版，自己根据思路去整合去试就行了。

---

全部地区的checkbox上加事件，选中时给下面的地区的checkbox加disabled,取消时去除