Javascript：选中复选框时启用复选框列表（使用原型）_Javascript_Html_Checkbox_Prototypejs

Javascript：选中复选框时启用复选框列表（使用原型）

javascript html checkbox

Javascript：选中复选框时启用复选框列表（使用原型）,javascript,html,checkbox,prototypejs,Javascript,Html,Checkbox,Prototypejs,我一直在使用jquery来做这件事，但现在我需要用Prototype来做，我有点困惑，因为缺少文档我有两个复选框列表第一份名单： Check box 1 Check box 2 第二份名单： Check box x check box y check box z 我需要JS代码，使用prototype这样工作：第二个列表保持禁用状态，除非我选中第一个列表中的一个复选框有什么建议吗？以下是JavaScript代码： Event.observe(window, 'load', functi

我一直在使用jquery来做这件事，但现在我需要用Prototype来做，我有点困惑，因为缺少文档

我有两个复选框列表

第一份名单：

Check box 1
Check box 2

第二份名单：

Check box x
check box y
check box z

我需要JS代码，使用prototype这样工作：第二个列表保持禁用状态，除非我选中第一个列表中的一个复选框

有什么建议吗？

以下是JavaScript代码：

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');
                }
            });
        });
    });
});

基于此HTML：

<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>

原型的文档非常好。以下是我使用的方法：

对于那些对如何在jQuery中实现这一点感兴趣的人：

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');
            }
        });
    });
});

这是Ive构建的测试代码，选中第一组复选框不是启用第二组复选框

<!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>


禁用切换
var复选框=$$（'input[name=“group1”]”）；
复选框。每个功能{
s、 观察（'点击'，函数（）{
如果（选中此项）{
$$（'input[name=“group2”]”）。每个函数{
s、 启用（）；
});
}否则{
如果（！$$（'input[name=“group2”][checked=“checked”].length）{
警报（“未检查”）；
$$（'input[name=“group2”]”）。每个函数{
s、 禁用（）；
});
}
}
});
});
第一组
第2组

你写什么了吗？或者你想让我们为你写吗？这是我的答案。我甚至找不到我要找的任何相近的例子，这对我来说很奇怪，因为我有JQuery的例子，没有一个是原型。工作起来很有魅力！内置到html中，导入原型库并完成！如果您要提供一些示例代码，那么它确实属于您的原始问题。您应该删除此“答案”并将其移至您的问题。

<!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>