Активность кнопки отправления при выделении некоторых элементов

[Pug-dog&Elephant]

<input type='radio' name='top1' value='top1'>top1</input><br />
<input type='radio' name='top2' value='top2'>top2</input><br />

<input type='radio' name='bottom1' value='bottom1'>bottom1</input><br />
<input type='radio' name='bottom2' value='bottom2'>bottom2</input><br />

<input type='submit' value='Отправить' />

Вопрос такой. Как сделать так, чтобы кнопка отправления была неактивна до тех пор, пока не выделен элемент top1 или top2 и (одновременно) bottom1 или bottom2?

[walik]

По моему лучше использовать чек боксы (по крайней мере в данном примере)
При смене состояния кнопок, проверяете:

<input type='checkbox' name='top1' value='top1' onchange="check();"/> top 1<br />
<input type='checkbox' name='top2' value='top1' onchange="check();" /> top 2<br />

<input type='checkbox' name='bottom1' value='top1' onchange="check();" /> bottom 1<br />
<input type='checkbox' name='bottom2' value='top1' onchange="check();" /> bottom 2<br />

<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
	var top1 = document.getElementsByName('top1')[0],
		top2 = document.getElementsByName('top2')[0],
		bottom1 = document.getElementsByName('bottom1')[0],
		bottom2 = document.getElementsByName('bottom2')[0],
		submit = document.getElementsByName('submit')[0];
	if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked))
		submit.disabled = '';
	else
		submit.disabled = 'disabled';
}
</script>

[Pug-dog&Elephant]

Нет, нужен именно radio, ибо у меня не должно быть возможности выбрать одновременно top1 и top2. Я так понимаю, что top1.checked -это только для input с типом checkbox?

А в конструкции if-else в JavaScript фигурные скобки не являются обязательными?

А если в форме будет несколько input с типом text, то как можно дополнить код, чтобы если хотя бы одно текстовое поле пустое, то кнопка отправления также была неактивна?

[walik]

top1.checked -это только для input с типом checkbox?

Нет, для радио тоже работать будет.

у меня не должно быть возможности выбрать одновременно top1 и top2

У ваших радио разные имена, а значит одновремена все равно выбрать можно.
Дайте им одинаковые имена.

А в конструкции if-else в JavaScript фигурные скобки не являются обязательными?

Нет, фигурные скобки ставятся когда вам нужно выполнить несколько инструкций (в нашем случае только одну надо)

А если в форме будет несколько input с типом text, то как можно дополнить код, чтобы если хотя бы одно текстовое поле пустое, то кнопка отправления также была неактивна?

Обращаетесь к нему и проверяете свойство value.length если будет ноль (пустое) то не показывать кнопку.

[Pug-dog&Elephant]

<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top1' onchange="check();" /> top 2<br />

<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 2<br />

<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
	var top = document.getElementsByName('top')[0],
		bottom = document.getElementsByName('bottom')[0],
		submit = document.getElementsByName('submit')[0];
	if (top.checked && bottom.checked)
		submit.disabled = '';
	else
		submit.disabled = 'disabled';
}
</script>

Не работает... Кнопка не становится активной...

[walik]

<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top2' onchange="check();" /> top 2<br />
 
<input type='radio' name='bottom' value='bottom1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='bottom2' onchange="check();" /> bottom 2<br />
 
<input type='submit' value='Отправить' name="submit" disabled="disabled"/>
<script>
function check() {
    var top1 = document.getElementsByName('top')[0],
        top2 = document.getElementsByName('top')[1],
        bottom1 = document.getElementsByName('bottom')[0],
        bottom2 = document.getElementsByName('bottom')[1],
        submit = document.getElementsByName('submit')[0];
    if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked))
        submit.disabled = '';
    else
        submit.disabled = 'disabled';
}
</script>

[Pug-dog&Elephant]

Точно. Так вот зачем нужны эти коварные цифры в скобках

[walik]

Ты получаешь массив элементов. И с помощью этих цифр мы получаем конкретный элемент. Отсчет начинается с нуля.
К примеру:
document.getElementsByName('top')[0] - Первый элемент с именем top
document.getElementsByName('top')[1] - Второй элемент с именем top

[Pug-dog&Elephant]

Теперь вопрос по input.

<script>
function check() {
        var top1 = document.getElementsByName('top')[0],
        top2 = document.getElementsByName('top')[1],
        bottom1 = document.getElementsByName('bottom')[0],
        bottom2 = document.getElementsByName('bottom')[1],
        input = document.getElementsByName('middle')[0],
        submit = document.getElementsByName('submit')[0];
        if ((top1.checked || top2.checked) && (bottom1.checked || bottom2.checked) && input.value !== '')
           submit.disabled = '';
        else
           submit.disabled = 'disabled';
}
</script>


<input type='radio' name='top' value='top1' onchange="check();"/> top 1<br />
<input type='radio' name='top' value='top1' onchange="check();" /> top 2<br />

<input type='text' name='middle' value='Текст' onchange="check();" /><br />

<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 1<br />
<input type='radio' name='bottom' value='top1' onchange="check();" /> bottom 2<br />

<input type='submit' value='Отправить' name="submit" disabled="disabled"/>

Работает, но состояние кнопки изменяется только после того, как фокус будет убран с input. Возможно ли сделать так, чтобы состояние кнопки срабатывало без убирания фокуса с input?

[walik]

Да, используй событие onkeydown или onkeyup вместо onchange