Форум

dranoc · #1 (**permalink**) 15.11.2018, 18:54

<p><input type="checkbox"  name="a" value=""> Выбрать</p>
    <p><input class="radio" name="one" type="radio" value="nedzen"> 1</p>
    <p><input class="radio" name="two" type="radio" value="dzen"> 2</p>

let check = document.getElementsByName("a")[0],
            radios = document.querySelectorAll(".radio");
 
        let sw = () => check.checked ? radios.forEach(e => e.disabled = false) : radios.forEach(e => e.disabled = true);
        sw();
        check.onchange = sw;
        console.log(radios);

Код не дает нажать радиокнопки пока не активен чекбокс, сделал также для второй группы радиокнопок и чекбокса - не работает(

<p><input type="checkbox" name="b" value=""> Выбрать</p>
    <p><input class="radio1" name="one" type="radio" value="nedzen"> 1</p>
    <p><input class="radio1" name="two" type="radio" value="dzen"> 2</p>

let check = document.getElementsByName("b")[0],
            radios = document.querySelectorAll(".radio1]");
 
        let sf = () => check.checked ? radios.forEach(e => e.disabled = false) : radios.forEach(e => e.disabled = true);
        sf();
        check.onchange = sf;
        console.log(radios);

js Знаю пока плохо

рони · #2 (**permalink**) 15.11.2018, 19:01

Сообщение от dranoc

сделал также для второй группы радиокнопок

почему в одной группе разные имена?

dranoc · #3 (**permalink**) 15.11.2018, 19:22

Случайно так сделал, но разные или одинаковые сути не меняет, 2 почемуто не работает, точнее он работает если его поставить первым в коде, но тогда не работает 2 в любом случае

рони · #4 (**permalink**) 15.11.2018, 21:03

dranoc,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

<style type="text/css">
</style>
  <script>
     addEventListener('DOMContentLoaded', function() {
     document.querySelectorAll('.radio').forEach(d => d.addEventListener('click', (e, {target} = e) =>
     target.type == 'radio' && !d.querySelector('[type="checkbox"]').checked && e.preventDefault()
     ))});
  </script>
</head>

<body>

<div class="radio">
<p><input type="checkbox" value=""> Выбрать</p>
<p><input name="one" type="radio" value="nedzen"> 1</p>
<p><input name="one" type="radio" value="dzen"> 2</p>
</div>
<div class="radio">
<p><input type="checkbox" value=""> Выбрать</p>
<p><input name="two" type="radio" value="nedzen"> 1</p>
<p><input name="two" type="radio" value="dzen"> 2</p>
</div>

</body>
</html>

j0hnik · #5 (**permalink**) 16.11.2018, 01:33

<!DOCTYPE html>

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style type="text/css">
</style>
<script>
	addEventListener('DOMContentLoaded', ()=>
		document.querySelectorAll('[type="radio"]').forEach(el=>
			el.onchange =e=> el.checked = el.closest('.radio').querySelector('[type="checkbox"]').checked));
</script>
</head>

<body>

	<div class="radio">
		<p><input type="checkbox" value=""> Выбрать</p>
		<p><input name="one" type="radio" value="nedzen"> 1</p>
		<p><input name="one" type="radio" value="dzen"> 2</p>
	</div>
	<div class="radio">
		<p><input type="checkbox" value=""> Выбрать</p>
		<p><input name="two" type="radio" value="nedzen"> 1</p>
		<p><input name="two" type="radio" value="dzen"> 2</p>
	</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript