Wyłączanie checkboksów w zależności od tego które są włączane

Odpowiedz Nowy wątek
2019-09-07 10:51
0

Cześć,

nie mogę sobie poradzić z formularzem.
W tej chwili formularz działa w ten sposób, że jeśli checkbox "yourBox" jest kliknięty, to dopiero wtedy checkbox "yourText" jest aktywny.

<input type="checkbox" class="yourBox">
<input type="checkbox" class="yourText">

<script>
var checkbox = document.querySelector(".yourBox");
var input = document.querySelector(".yourText");

var toogleInput = function(e){
  input.disabled = !e.target.checked;
};

toogleInput({target: checkbox});
checkbox.addEventListener("change", toogleInput);
</script>

Chciałbym zrobić to inaczej, tzn. jeśli żaden checkbox nie jest klikniętym to oba są aktywne, ale jeśli kliknie się jeden z dwóch, to drugi jest nieaktywny. Czy ktoś może mi podpowiedzieć jak to zrobić?

edytowany 1x, ostatnio: cerrato, 2019-09-09 10:39

Pozostało 580 znaków

2019-09-07 10:57
0
<body style="background: darkgoldenrod;">

<form method="get" action="">
  <input type="radio" name="radio1" />
  <input type="radio" name="radio1" />
</form>

</body>

Musisz tym inputom nadać ten same name, żeby były jednokrotnego wyboru, a nie wielokrotnego jak input type="checkbox".
w3.org w3.org w3.org

edytowany 2x, ostatnio: Neutral, 2019-09-07 11:00

Pozostało 580 znaków

2019-09-07 11:03
0

Niestety nie mogę się na tym oprzeć, dlatego że formularz jest zgłoszeniem do wzięcia w udziału w wydarzeniu i tych checboksów będzie całkiem sporo

Przykład:

DZIEŃ 1

lokalizacja A

[checkbox] - panel 1 (godz. 09-10)
[checkbox] - panel 2 (godz. 10-11)

lokalizacja B

[checkbox] - panel 1 (godz. 09-10)
[checkbox] - panel 2 (godz. 10-11)

Wypełniając formularz, nie można zapisać się na panel 1 (który jest o tej samej godzinie) w obu lokalizacjach, tylko w jednej

zamist pionową listę zrób poziomo i wtedy na dana godzine mozesz miec radio kropki :D - Akihito 2019-09-07 12:26

Pozostało 580 znaków

2019-09-07 13:23
3

No to może napisz w ten sposób.

<input type="radio" name="radio1" />
<input type="radio" name="radio2" />
<!-- ... -->
<input type="radio" name="radio1" />
<input type="radio" name="radio2" />

Pozostało 580 znaków

2019-09-09 08:54
0
Neutral napisał(a):

No to może napisz w ten sposób.

<input type="radio" name="radio1" />
<input type="radio" name="radio2" />
<!-- ... -->
<input type="radio" name="radio1" />
<input type="radio" name="radio2" />

Ale to będzie oznaczało, że mogę się zapisać na godzinę 9 jednocześnie w lokalizacji A i B

Pozostało 580 znaków

2019-09-09 10:22
0

Testowałeś to w ogóle? Pierwsze dwa inputy mają być w lokalizacji A i następne dwa w lokalizacji B. Klikając na input name="input1" w lokalizacji pierwszej odznaczy się input name="input1" w lokalizacji drugiej.

Pozostało 580 znaków

2019-09-09 20:49
0

jeśli wybiorę w lokalizacji A

[radio] - panel 1 (godz. 09-10)

to nie będę mógł wybrać w lokalizacja B

[radio] - panel 2 (godz. 10-11)

Pozostało 580 znaków

2019-09-09 23:16
0
yacazg napisał(a):

W tej chwili formularz działa w ten sposób, że jeśli checkbox "yourBox" jest kliknięty, to dopiero wtedy checkbox "yourText" jest aktywny.

Nie działa bo sobie go sam wyłączasz. => toogleInput({target: checkbox});
Gdzie są if-y ?
Proponuje użyć bibloteki jQuery, będzie Ci prościej to ogarnąć przy większej ilości.


Nie pomagam naPW.!.

Pozostało 580 znaków

2019-09-10 08:09
0

Znalazłem rozwiązanie, które mi odpowiada, ale niestety jest oparte na selektorach ID a ja muszę się oprzeć na class-ach.
Pozmieniałem (w skrypcie) getElementById na getElementByClassName, pozmieniałem id na class, ale niestety nie działa jak w pierwotnej wersji (w sumie w ogolę nie działa. Poniżej skrypt bez moich zmian).
Coś źle robię (w sumie to nie znam się na JS).
Czy ktoś może mi podpowiedzieć, jak to pozmieniać?

 <form action="./" id="checkForm" method="post">
    <fieldset>
        <label for="foo">foo</label>
        <input type="checkbox" id="foo" value="foo"/>
        <label for="bar">bar</label>
        <input type="checkbox" id="bar" value="bar"/>
        <label for="baz">baz</label>
        <input type="checkbox" id="baz" value="baz"/>
    </fieldset>
</form>

  <script type="text/javascript">//<![CDATA[

var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;

addChangeHandlers(form);

function addChangeHandlers(form)
{
   for(var i=0;i<form.elements.length;i++)
   {
       var element = form.elements[i];
       if(element.tagName === "INPUT" && element.type === "checkbox")
       {
           if(!element.onchange)
           {
               element.onchange = checkBoxChanged;   
           }
       }
   }  
}

function delegateFormClick(evt)
{
    var target;
    if(!evt)
    {
        //Microsoft DOM
        target = window.event.srcElement;
    }else if(evt)
    {
        //w3c DOM 
        target = evt.target;
    }
    if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
    {
        if(target.checked)
        {
            disableCheckBoxes(target.id, document.getElementById("checkForm"));
        }else if(!target.checked)
        {
            enableCheckBoxes(document.getElementById("checkForm"));
        }  
    }
}

function checkBoxChanged()
{
    if(this.checked)
    {
       disableCheckBoxes(this.id, document.getElementById("checkForm")); 
    }else if(!this.checked)
    {
        enableCheckBoxes(document.getElementById("checkForm"));  
    }
}

function disableCheckBoxes(id, form)
{
    var blacklist = [];
    if(id)
    {
        switch(id)
        {
            case "foo":
            blacklist = ["bar", "baz"];
            break;
            case "bar":
            blacklist = ["foo"];
            break;
            case "baz":
            blacklist = ["foo", "bar"];
            break;
        }   
    }else
    {
        throw new Error("id is needed to hard-wire input blacklist");   
    }
    for(var i=0;i<blacklist.length;i++)
    {
        var element = document.getElementById(blacklist[i]);
        if(element && element.nodeType === 1)
        {
            //check for element
            if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
            {
                element.disabled = "disabled";
            }
        }else if(!element || element.nodeType !== 1)
        {
            throw new Error("input blacklist item does not exist or is not an element");
        }
    }   
}

function enableCheckBoxes(form)
{
    for(var i=0;i<form.elements.length;i++)
    {
        var element = form.elements[i];
        if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
        {
            element.disabled = "";
        }
    }   
}

  //]]></script>

Pozostało 580 znaków

2019-09-10 18:09
<body style="background: darkgoldenrod;">
<form method="get" action="">
  <fieldset class="group_checkboxes">
    <legend>Fruit</legend>
    Orange[09-10]: <input type="radio" value="09-10" name="group_1" />
    Strawberry[10-00]: <input type="radio" value="10-00" name="group_1" />
  </fieldset>
  <fieldset class="group_checkboxes">
    <legend>Vegetable</legend>
    Onion[09-10]: <input type="radio" value="09-10" name="group_2" />
    Carrot[12-00]: <input type="radio" value="12-00" name="group_2" />
    Potato[10-00]: <input type="radio" value="10-00" name="group_2" />
  </fieldset>
  <fieldset class="group_checkboxes">
    <legend>Colours</legend>
    Green[12-00]: <input type="radio" value="12-00" name="group_3" />
    Yellow[15-10]: <input type="radio" value="15-10" name="group_3" />
  </fieldset>
  <input type="submit" value="Commit" />
</form>
const group_checkboxes = document.querySelectorAll('fieldset.group_checkboxes');

function xyz(e) {
  l1: for(let i=0;i<group_checkboxes.length;i++) {
    l2: for(let j=0;j<group_checkboxes[i].querySelectorAll('input').length;j++) {
      if(e.target != group_checkboxes[i].querySelectorAll('input')[j] && e.target.value == group_checkboxes[i].querySelectorAll('input')[j].value) {
        group_checkboxes[i].querySelectorAll('input')[j].checked = false;
        break l1;
        break l2;
      }
    }
  }
}

document.addEventListener('click', xyz, false);
</body>

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0