Question

早就利用了 j来这样做,但现在我需要这样做,因为文件缺乏,所以它带有图形,很少被混淆。

我有2个检查箱清单。

第一清单:

Check box 1
Check box 2

第二个名单:

Check box x
check box y
check box z

我需要联合工作组的守则,使用原型来开展这项工作: 第二份名单仍然残疾,除非我检查第一份名单的检查箱之一。

任何建议?

Answer 1

Here本法典:

Event.observe(window,  load , function(){
    // for all items in the group_first class
    $$( .group_first ).each(function(chk1){
        // watch for clicks
        chk1.observe( click , function(evt){
            // count how many of group_first
            // are checked, true if any are checked
            var doEnable = ($$( .group_first:checked ).length > 0);
            // for each in group_second, enable the
            // checkbox, and remove the cssDisabled class
            $$( .group_second ).each(function(item){
                if (doEnable) {
                    item.enable().up( label ).removeClassName( cssDisabled );
                } else {
                    item.disable().up( label ).addClassName( cssDisabled );
                }
            });
        });
    });
});

根据这一超文本:

<fieldset>
    <legend>First Group</legend>
    <label><input type="checkbox" value="1"
        class="group_first" />Check box 1</label><br />
    <label><input type="checkbox" value="2"
        class="group_first" />Check box 2</label>
</fieldset>


<fieldset>
    <legend>Second Group</legend>
    <label class="cssDisabled"><input type="checkbox" value="x"
        class="group_second" disabled="disabled" />Check box x</label><br />
    <label class="cssDisabled"><input type="checkbox" value="y"
        class="group_second" disabled="disabled" />Check box y</label><br />
    <label class="cssDisabled"><input type="checkbox" value="z"
        class="group_second" disabled="disabled" />Check box z</label>
</fieldset>

加入本中心:

.cssDisabled { color: #ccc; }

原型文件非常好。这里使用的是:

对于有兴趣在酒类中如何做到这一点的人:

jQuery(document).ready(function(){ 
   $( .group_first ).bind( click , function(){
        var doEnable = ($( .group_first:checked ).length > 0);
        $( .group_second ).each(function(){
            if (doEnable) {
                $(this).attr( disabled , null);
                $(this).parents( label ).removeClass( cssDisabled );
            } else {
                $(this).attr( disabled ,  disabled );
                $(this).parents( label ).addClass( cssDisabled );
            }
        });
    });
});

Answer 2

这是测试代码Ive建造和检查第1组检查箱,不能使第2组检查箱进入。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>toggle disabled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="prototype.js" type="text/javascript"> 
<script type="text/javascript">
var checkboxes = $$( input[name="group1"] );
checkboxes.each(function(s) {
    s.observe( click , function() {
        if(this.checked) {
            $$( input[name="group2"] ).each(function(s) {
                s.enable();
            });
        } else {
            if(!$$( input[name="group2"][checked="checked"] ).length) {
                alert( nothing checked );
                $$( input[name="group2"] ).each(function(s) {
                    s.disable();
                });
            }
        }
    });
});
</script>

</head>
<body>
    <div>
        <label> Group 1 </label>
        <input type="checkbox" name="group1" value="test"/>
        <input type="checkbox" name="group1" value="test"/>
        <input type="checkbox" name="group1" value="test"/>
    </div>
    <div>
        <label> Group 2 </label>    
        <input type="checkbox" name="group2" disabled="disabled"/>
        <input type="checkbox" name="group2" disabled="disabled"/>
        <input type="checkbox" name="group2" disabled="disabled"/>
    </div>
</body>
</html>

友情链接