Question

我在这里遇到问题，当我选择任何“父亲”复选框时，所有子复选框都被启用或禁用。所以我需要每个父复选框来影响它自己的子字段集。有人可以帮我这个。

谢谢

<!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">
<style type="text/css">
.cssDisabled { color: #ccc; }
</style>

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"> </script>
<script type="text/javascript">
Event.observe(window, 'load', function(){
    // for all items in the group_first class
    $$('.father').each(function(chk1){
        // watch for clicks
        chk1.observe('click', function(evt){
            dynamicCheckbox();
        });
    dynamicCheckbox();
    });
});
function dynamicCheckbox (){
    // count how many of group_first are checked,
            // doEnable true if any are checked
    var doEnable = ($$('.father:checked').length > 0) ? true : false;
    // for each in group_second, enable the checkbox, and
            // remove the cssDisabled class from the parent label
    $$('.child').each(function(item){
        if (doEnable) {
            item.enable().up('label').removeClassName('cssDisabled');
        } else {
            item.disable().up('label').addClassName('cssDisabled');
        }
    });
};
</script>

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

<fieldset>
    <legend>Second Group</legend>
    <label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br />
    <label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br />
    <label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label>
</fieldset>
    <fieldset>
    <legend>First Group</legend>
    <label><input type="checkbox" value="3" class="father" />Check box 1</label><br />
</fieldset>

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

Answer 1

我不完全确定你想要的影响，但这里有广泛的规则。您需要HTML中的某些内容告诉您的js应该影响哪些内容。属性最好，rel或id或最简单的class。

因此，在.father s中为每个.father提供一个唯一的ID。

<input type="checkbox" value="2" class="father" id="foo">
<input type="checkbox" value="3" class="father" id="bar">

然后给孩子们相应/相同的班级。

<input type="checkbox" value="1" class="child foo">
<input type="checkbox" value="2" class="child bar">

（顺便说一句，你没有使用XHTML，因此你不需要使用尾部斜杠。）

我不知道Prototype，但您需要做的是，对于每个.father，抓住id（上面的#foo和#bar）并查看对于所有具有.child 和类.foo或.bar的复选框，具体取决于。{ （您可以通过将id存储到变量中来改变最后一位，并更改要在句点上添加的文本并使其成为一个类。）

Javascript：动态复选框（带有父/子复选框的Fieldset）

1 个答案: