Javascript: динамический флажок (Fieldset с флажками отца / ребенка) - PullRequest
Новая
       10

Javascript: динамический флажок (Fieldset с флажками отца / ребенка)

0 голосов
/ 07 мая 2010

У меня проблема здесь, когда я выбираю любой из флажков «отец», все дочерние флажки включаются или отключаются.Поэтому мне нужен каждый флажок отца, чтобы повлиять на его собственный дочерний набор полей.Может ли кто-нибудь помочь мне с этим.

Спасибо 

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

1 Ответ

0 голосов
/ 08 мая 2010

Я не совсем уверен, какой эффект вы хотите, но вот общие правила. Вам нужно что-то в вашем HTML, чтобы сказать JS, что должно повлиять на что. Атрибуты лучше всего, либо rel или id, либо, проще всего, class.

Итак, присвойте каждому .father идентификатор, уникальный для него среди .father с. 

<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 в переменной и изменив текст, добавив точку и сделав ее классом.)

...