javascript - disable více checkboxů

Václav Sedlář

Ahoj, trochu "lama" dotaz, ale hold nejsem s JS moc kamarád

Mám formulář, kde je x chceboxů.

Je to rozděleno na sekce a podsekce:

checkbox_sekce1
-checkbox_sekce1_podsekce1
-checkbox_sekce1_podsekce2
-checkbox_sekce1_podsekce3
checkbox_sekce2
-checkbox_sekce2_podsekce1
-checkbox_sekce2_podsekce2
-checkbox_sekce2_podsekce3

defaultně jsou všechny checkboxy zaškrtnuty a já potřebuji, aby když user odškrtl nějakou sekci, tak aby se disablovaly všechny checkboxy, kteří pod danou sekci patří...(a naopak - když sekci zaškrtne, tak aby se podsekce enablovaly)

původně jsem to měl takto:

Kód: Vybrat vše

formulář:
<input id="section_1" onclick="check_quest(1);" type="checkbox" value="1" name="section[]" checked />

<input class="section_1" type="checkbox" checked value="1" name="question1[]" />
<input class="section_1" type="checkbox" checked value="2" name="question1[]" />
<input class="section_1" type="checkbox" checked value="3" name="question1[]" />


<input id="section_2" onclick="check_quest(2);" type="checkbox" value="2" name="section[]" checked />

<input class="section_2" type="checkbox" checked value="1" name="question2[]" />
<input class="section_2" type="checkbox" checked value="2" name="question2[]" />
<input class="section_2" type="checkbox" checked value="3" name="question2[]" />
...
...
...

javascript:

function check_quest(sid){
    if(document.getElementById('section_'+sid).checked){
        document.getElementsByClassName('section_'+sid).disabled = false;
    }else{
        document.getElementsByClassName('section_'+sid).disabled = true;
        
    }
}

Ale bohužel to nefungovalo...

Když jsem ale místo class používal id, takto jde, jenže nemůžu mít správně více stejných ID...

Díky za pomoc

Edit - může to být klidně pomocí jquery, ne jen čistým js...

Václav Sedlář

Vyřešeno zatím takto (nevím zda je to optimální):

checkboxům-sekcím dávám class section a checkboxům-podsekcím dávám class="section_idsekce"

Kód: Vybrat vše

<script type="text/javascript">
$(function(){
    $('.section').click(function(){
        $(".section:not(:checked)").each(function() {
        $(".section_"+$(this).val()).prop('disabled', true);  
    });
    $(".section:checked").each(function() {
        $(".section_"+$(this).val()).prop('disabled', false);  
    });
        
    });
});
</script>

1Pupik1989 · Příspěvek od **1Pupik1989** » čtv 24. dub 2014, 10:38

Na dalšího potomka z inputu můžeš přeskakovat ponocí nextSibling. Takže když budeš v cyklu kontrolovat, jestli se className rovná třeba section1, tak máš vyhráno. Osobně bych ty podsekce obalil divem a pak je odškrtával. Lépe se ti s tím bude manipulovat.

Kód: Vybrat vše

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Test zaškrtávání checkboxů</title>
  </head>
  <body>
    formulář:
    <input id="section_1" onclick="check_quest(this);" type="checkbox" value="1" name="section[]" checked>
    <input class="section_1" type="checkbox" checked value="1" name="question1[]">
    <input class="section_1" type="checkbox" checked value="2" name="question1[]">
    <input class="section_1" type="checkbox" checked value="3" name="question1[]">
    
    <input id="section_2" onclick="check_quest(this);" type="checkbox" value="2" name="section[]" checked>
    
    <input class="section_2" type="checkbox" checked value="1" name="question2[]">
    <input class="section_2" type="checkbox" checked value="2" name="question2[]">
    <input class="section_2" type="checkbox" checked value="3" name="question2[]">
    
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

A potom javascript:

Kód: Vybrat vše

function check_quest(el){
  var id = el.id;
  var checked = el.checked ? false : true;

  while(el = el.nextSibling){
    if(el.nodeType !== 3){
      
      if(el.className !== id){ break; }
      
      el.disabled = checked;
    }
  }
};

getElementsByClassName nefunguje v IE < 9. JQuery je v tomto případě také zbytečné. Akorát by to brzdilo a nafouklo kód.

javascript - disable více checkboxů

javascript - disable více checkboxů

Re: javascript - disable více checkboxů

Re: javascript - disable více checkboxů