Здравствуйте, как можно сделать кнопку чтобы активировался и деактивировался по условии: если хоть одна значения из 3-х раскрывающих списка равнялся нулю: деактивировать если 3 раскрывающие списки больше нули: активировать Код (Text): <p> <select name="filter_x" > <option>0</option> <option>1</option> <option>2</option> </select> </p> <p> <select name="filter_y" > <option>0</option> <option>1</option> <option>2</option> </select> </p> <select name="filter_z" > <option>0</option> <option>1</option> <option>2</option> </select> </p> <input type="submit" value="Найти" class="button" name="filter" />
короткий ответ: javascript чуть более подробный ответ: 1. текст у option это текст, а не значение. укажите value="{ваше_значение}" 2. создайте некоторую функцию которая спросит у трех селектов их значение и запишет логическое значение доступности у кнопки. там всего одна строка в этой функции будет. 3. назначьте эту функцию на событие изменения каждого из ваших селектов.
сделал так что-то не получается Код (Text): <BODY> <script type="text/javascript"> function butnx() { var filter_x = document.getElementById('filter_x'); var filter_y = document.getElementById('filter_y'); var filter_z = document.getElementById('filter_z'); var butn = document.getElementById(''); filter_x.value !=0 ? butn.disabled = false : butn.disabled = true; } </script> <p> <select name="filter_x" id="filter_x" onkeyup="butnx();" onkeypress="butnx();" onchange="butnx();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <p> <select name="filter_y" id="filter_y" onkeyup="butnx();" onkeypress="butnx();" onchange="butnx();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <select name="filter_z" id="filter_z" onkeyup="butnx();" onkeypress="butnx();" onchange="butnx();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <input type="button" id="butn" value="Найти" disabled="disabled" /> </BODY>
Ganzal, спасибо вот так получился Код (Text): var butn = document.getElementById('butn'); filter_x.value !=0 && filter_y.value !=0 && filter_z.value !=0 ? butn.disabled = false : butn.disabled = true;
отличная новость. но все же события лучше навешивать не инлайн а через методы DOM. и естественно держать JS во внешних файлах. Код (Text): // объявили функцию function filter_check() { document.getElementById('butn').disabled = ( document.getElementById('filter_x').value === '0' || document.getElementById('filter_y').value === '0' || document.getElementById('filter_z').value === '0' ) ? true : false; } // навешиваем. достаточно только события change, кстати. document.getElementById('filter_x').addEventListener('change', filter_check); document.getElementById('filter_y').addEventListener('change', filter_check); document.getElementById('filter_z').addEventListener('change', filter_check);
ок заменил код Добавлено спустя 14 минут 3 секунды: а если добавить еще одну кнопку, при нажатии на кнопку активировался и деактивировался другая кнопка??? условии такие больше 0 или равно 0
еще раз? добавить кнопку это понятно - элемент button. при нажатии тоже понятно - событие click. аткив/деактив другой кнопки - свойство disabled, уже прошли в этой теме. а больше нуля равно нулю не понятно. где то значение которое мы с нулем сравниваем? подробнее идею распишите, пожалуйста.
условии такие, только после нажатии кнопки "актив" активировался или деактивировался кнопка "Найти" Код (Text): <BODY> <script type="text/javascript"> // объявили функцию function filter_check() { document.getElementById('butn').disabled = ( document.getElementById('filter_x').value === '0' || document.getElementById('filter_y').value === '0' || document.getElementById('filter_z').value === '0' ) ? true : false; } </script> <p> <select name="filter_x" id="filter_x" onchange="filter_check();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <p> <select name="filter_y" id="filter_y" onchange="filter_check();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <select name="filter_z" id="filter_z" onchange="filter_check();"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <input type="button" id="butn" value="Найти" disabled="disabled" /> <input type="button" id="butn111" value="Актив" disabled="disabled" /> </BODY>
и снова логика не очевидна. меняем селекты - должна отключаться кнопка "актив" насколько я понял, да? а по нажатию на активную кнопку "актив" должна активироваться кнопка "найти" что ли? вы логику словами подробно распишите. и в этом ответе кстати уже будет содержаться правильно решение.
Ganzal, поменял картину да Кнопка "Актив" постоянно активная, если нажав на кнопку "Актив" смотрит на условии условия те же как на первом сообщении и соответственно активирует или декактивирует кнопку "Найти" Добавлено спустя 3 минуты 24 секунды: вроде так Код (Text): <BODY> <script type="text/javascript"> // объявили функцию function filter_check() { document.getElementById('butn').disabled = ( document.getElementById('filter_x').value === '0' || document.getElementById('filter_y').value === '0' || document.getElementById('filter_z').value === '0' ) ? true : false; } </script> <p> <select name="filter_x" id="filter_x"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <p> <select name="filter_y" id="filter_y"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <select name="filter_z" id="filter_z"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </p> <input type="button" id="butn" value="Найти" disabled="disabled"/> <input type="button" value="Актив" onclick="filter_check()"/> </BODY>