Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > флажки, зависящие от переключателей

Автор: begin 22.4.2009, 15:41

На форме есть несколько пар переключатель-флажок:

Код


<input name='myradio' type='radio' value='1'><input type='checkbox' name='c[1]' value='true'>опция №1
<input name='myradio' type='radio' value='2'><input type='checkbox' name='c[2]' value='true'>опция №2
<input name='myradio' type='radio' value='3'><input type='checkbox' name='c[3]' value='true'>опция №3

Нужно сделать так, чтобы пользователь не мог поставить переключатель там, где не установлен флажок.
Подскажите, пожалуйста, как это сделать?

Автор: NNaarreekk 22.4.2009, 16:08

Код


<input name='myradio' type='radio' value='1' onclick='if(document.getElementById(\"c_1\").value!=true)return false;'><input type='checkbox' name='c[1]' value='true' id='c_1'>опция №1
<input name='myradio' type='radio' value='2'><input type='checkbox' name='c[2]' value='true'>опция №2
<input name='myradio' type='radio' value='3'><input type='checkbox' name='c[3]' value='true'>опция №3

Автор: Soah 22.4.2009, 16:10

Код


<script type="text/javascript">

function myCheck(index) {
    var rad = document.getElementsByName('myradio')[index];
    rad.disabled = !rad.disabled;
    
    if (!rad.diabled)
        rad.checked = false;
}

</script>

<input name='myradio' type='radio' value='1' disabled="disabled"><input type='checkbox' name='c[1]' value='true' onclick="myCheck(0)">опция №1
<input name='myradio' type='radio' value='2' disabled="disabled"><input type='checkbox' name='c[2]' value='true' onclick="myCheck(1)">опция №2
<input name='myradio' type='radio' value='3' disabled="disabled"><input type='checkbox' name='c[3]' value='true' onclick="myCheck(2)">опция №3

Автор: begin 22.4.2009, 16:37

NNaarreekk, сделал по вашему примеру:

Код


<input name='myradio' type='radio' value='3' onclick='if(document.getElementById(\"c_3\").value!=true)return false;'>
<input type='checkbox' name='c[3]' id='c_3' value='true'>

<input name='myradio' type='radio' value='4' onclick='if(document.getElementById(\"c_4\").value!=true)return false;'>
<input type='checkbox' name='c[4]' id='c_4' value='true'>

<input name='myradio' type='radio' value='5' onclick='if(document.getElementById(\"c_5\").value!=true)return false;'>
<input type='checkbox' name='c[5]' id='c_5' value='true'>

Но не работает - переключатель ставится на всех парах, независимо от статуса флажка.

Soah, Ваш пример тоже не сработал. И, кстати, его принцип работы вообще не понятен. Какой индекс у переключателя мы можем взять, если на форме они не заданы?

Автор: Soah 22.4.2009, 16:57

Цитата(begin @ 22.4.2009, 16:37

)

Ваш пример тоже не сработал

можно посмотреть код

Цитата(begin @ 22.4.2009, 16:37

)

если на форме они не заданы?

getElementsByName - Метод возвращает коллекцию элементов страницы с заданным значением атрибута NAME.

Автор: begin 22.4.2009, 18:14

Цитата(Soah @ 22.4.2009, 16:57)

можно посмотреть код

Всё таки заработало smile

Вот работающий код:

Код


<script type="text/javascript">
function myCheck(index) {
    var rad = document.getElementsByName('myradio')[index];
    rad.disabled = !rad.disabled;
    if (!rad.disabled)
        rad.checked = false;
}
</script>
<input name='myradio' type='radio' value='3' disabled="disabled"><input type='checkbox' name='c[3]' value='3' onclick="myCheck(1)">
<input name='myradio' type='radio' value='4' disabled="disabled"><input type='checkbox' name='c[4]' value='4' onclick="myCheck(2)">
<input name='myradio' type='radio' value='5' disabled="disabled"><input type='checkbox' name='c[5]' value='5' onclick="myCheck(3)">

но было две ошибки с моей стороны:
1. в вашем примере в строке

Код


rad.disabled = !rad.disabled;

была пропущена буква s, а я не заметил этого вначале.
2. в выражении

Код


onclick="myCheck(3)"

я вставлял не порядковый номер элемента (а ведь именно он имелся в виду, да?), а значение value.
Вобщем теперь все работает. Всем большое спасибо smile

Автор: Soah 22.4.2009, 18:34

Цитата(begin @ 22.4.2009, 18:14

)

а ведь именно он имелся в виду, да?

да, но индексы начинаются с нуля

Код


    if (!rad.disabled)

а вот эту строчку можно и убрать

если ответ на вопрос получен, то пометь тему решенной,
в правом верхнем углу.

Автор: Aliance 23.4.2009, 16:21

begin,
Этот код не работает:

Код


document.getElementById(\"c_3\").value!=true

потому что у тебя значение value имеет тип строка, а ты сравниваешь с типом булевским.

Автор: bars80080 23.4.2009, 19:36

Цитата(Aliance @ 23.4.2009, 16:21

)

потому что у тебя значение value имеет тип строка, а ты сравниваешь с типом булевским.

не важно, если засунуть что-нибудь в if(), он автоматом преобразуется к булеву. при не строгом сравнении != true должно прокатить,
правда я бы всё же сравнивал if(!document.getElementById(\"c_3\").value)

Автор: Soah 23.4.2009, 21:01

не работает, потому что используется не тот атрибут

Код


<input name='myradio' type='radio' value='1' onclick='if(!document.getElementById("c_1").checked)return false;' />
<input type='checkbox' id='c_1' />опция №1

но, имхо, это не совсем правильно,
если обьект нельзя выбрать, он должен быть disabled.

и ещё один момент, если переключатель выбран, а потом флажок убираем,
имхо, надо и переключатель убрать.

Автор: begin 29.4.2009, 22:04

У меня все же тот код работает. А насчет индексов я догадался. У меня в примере начинаются не с нуля, потому что перед ними стоит еще один элемент формы. Вот я и предположил, что он будет иметь нулевой индекс. Всех благодарю за ответы.