Przycisk aktywny dopiero po zaznaczeniu checkboxa

Cześć,

uczę się programować i mam za zadanie zrobić zapewne coś dla Was prostego, a ja jeszcze nie mam w tym doświadczenia.

Mam zrobić button do następnej strony, który będzie aktywny dopiero po tym gdy użytkownik zaznaczy w checkboxie, że akceptuje regulamin. Bez zaznaczenia pola "akceptuję regulamin" w button powinno nie dać się kliknąć.

Mógłbym prosić Was o pomoc w tym jak to zrobić?

Np tak:

INPUT.cz + BUTTON {
  pointer-events:none;
  opacity:.5;
}

INPUT.cz:checked + BUTTON {
  pointer-events:auto;
  opacity:1;
}

<input type="checkbox" name="cz1" class="cz" value="cz1">
<button onclick="alert('to tylko testowa akcja, wywal ten onclick');">A ja przycisk jestem</button>

@Freja Draco - W sumie fajny pomysł. Ja od razu wszędzie bym pchał JS, a potem wyskakuje smoczyca i daje świeże spojrzenie na temat z innej strony (aczkolwiek, uwzględniając uwagi @mr_jaro poniżej - niekoniecznie lepsze, ale na pewno bardziej widowiskowe)

@cerrato: też bym poszedł w js, jest zwyczajnie bezpieczniejszy, pomysł z css padnie gdy zmieni się struktura danych, poza tym button i checkbox musiały by mieć wspólnego rodzica i nie być w osobnych kontenerach co jest rzadko kiedy możliwe.

Hej, dzięki wielkie za odpowiedź.

Ale chyba nie o to mi chodziło. Łatwiej będzie to chyba zrobić w JS.

Ma to działać tak, że użytkownik widzi pole: [] Akceptuję regulamin.

i pod nim button z napisem "Akcpetuję", który aktywuje się dopiero po zaznaczeniu checkoxa u góry. Kliknięcie w button przekierowuje go do dalszej strony (ale to kliknięcie jest niemożliwe bez zaznaczenia "ptaszka" u góry.

Z góry dzięki

1. Przypisz checkbox do zmiennej (np. za pomocą funkcji document.querySelector)
2. Dodaj do checkboxa listener (czyli funkcja która wykona się po jakiejś akcji np. kliknięciu na niego, możesz użyć funkcji addEventListener)
3. W funkcji rozpoznaj czy checkbox jest zaznaczony i zablokuj/odblokuj button

Marudy :p

<input type="checkbox" class="cz1" name="cz1" value="cz1">
<button class="cz1">A ja przycisk jestem</button>

document.querySelector("BUTTON.cz1").addEventListener("click", function(){if(document.querySelector("INPUT.cz1").checked) {
  alert("akcja! akcja!"); 
} else {
  alert("nie no człowieku, ty czekboks musisz zaznaczyć"); 
}});