JavaScript – Как делать активной и неактивной кнопку в зависимости от условий
Итак сегодня мне понадобилось сделать одну фичу в своём новом прожекте. Проект достаточно обширный, чтобы объянять что и как и поэтому я расскажу о самой сути этой “фичи”.
Задача состояла в том, чтобы админ мог удалять пользователей из базы. Итак задаём параметры поиска и php скрипт выдаёт нам список пользователей. Напротив каждого пользователя стоит квадратик чекбокс (checkbox) переключатель, дабы можно было выделить и удалить.
Но не всё так просто. Задача состояла в том, чтобы кнопка “удалить” была неактивной, а активной становилась лишь в тот момент, когда выбран хоть один флажёк. Естественно монстры JavaScript скажут, да тут два пальца обасс “об асфальт”. Но я не монстр JS, и прибегаю к программированию на сием языке только когда захочется чего-нибудь эдакого, для удобства.
Итак, как порядочный я полез в сеть, и Яндекс и Гугл и всякие там порталы напихали мне в браузер очень много разного кода из которого мой мозг всё-таки слепил именно то, что мне требовалось. Как оказалось, нормальных (работающих) примеров в сети толком то и нет и поэтому, чтобы другой подобный мне не взрывал свой мозг, я решил выложить рабочий пример JavaScript кода.
<script type="text/javascript">
checkobj = 0;function checkAvail(obj){
if(obj.checked) checkobj++;
else checkobj--;
if (checkobj<=0) document.form_del.elements['submit'].disabled = true;
else document.form_del.elements['submit'].disabled = false;
}
</script>
HTML же реализацию думаю понять не сложно, но всё-таки я и её добавлю:
<form action="subscriber_del.php" method="post" name="form_del">
<input name="ids" type="checkbox" value="1" onClick="checkAvail(this)"> 1 - <b>One</b><br>
<input name="ids" type="checkbox" value="2" onClick="checkAvail(this)"> 2 - <b>Two</b><br>
<input name="ids" type="checkbox" value="3" onClick="checkAvail(this)"> 3 - <b>Three</b><br>
…
<input name="ids" type="checkbox" value="10" onClick="checkAvail(this)"> 10 - <b>Ten</b><br>
<input disabled name="submit" type="submit" value="Удалить" onClick="return confirm('Вы уверены?')">
Итак в чём же основная проблема с которой столкнулся я. Оказывается “выключить” кнопку можно как угодно, т.е. обратившись к элементу submit в любой доступной форме:
submit.disabled = true;
Однако включить (заменим на false) подобным способом не получается и именно поэтому я накопал аж вот такую конструкцию:
document.form_del.elements['submit'].disabled = true;
И вот здесь, если мы заменям true на false, то кнопка как включается, так и выключается. Ну и напоследок расшифрую я эту строчку кода:
В теущем документе в форме по имени “form_del” в элементе у которого имя “submit” (а у нас в примере это имя носит кнопка) есть свойсто “disabled”, так вот мы включаем его “true” или выключаем “false”. Т.о. включив данное свойство мы сделаем нашу кнопку неактивной, а выключив свойство, наша кнопка снова станет активной.
Успехов всем!
MAX пишет:
03.09.2008 @ 18:47
Не гламурно.
Делаешь форму, как обычно. Потом с помощью jQuery цепляешь на свои чекбоксы событие на click который и делает все эти энейблы как нужно. Код получаеся примитивный, а главное, что можно сильно не заморачиваться с самой формой.
JawsIk пишет:
04.09.2008 @ 16:46
Тут я могу сказать три момента:
Надеюсь, что вы избавитесь от этого глупого выражения. Успехов вам!
1. Если глянуть код функции JS, то видно, что код примитивный, а код формы я вообще привёл, как пример.
2. Я понятия не имею, что такое jQuery, если уж употребляете что-то, то хоть объясняйте кратко, что оно такое, а так даже ломает в тындекс лезть глядеть.
3. Да, вы правы, это не гламурно. Потому как гламурно, значит "для педиков", потому как (судя по рекламе на ТВ, или я не прав?)гламур - это женский журнал :-), которые читают либо женщины, либо женоподобные мужчины (педрилы). Я уважаю вас Максим, но увы мне неприятно слышать от вас такой жопотраховый жаргон. Из моего круга никто не употребляет это выражение, мы не гопота и не уроды, мы просто "не пидары"
cross пишет:
09.09.2008 @ 16:58
Спасибо за реализацию.
PS: "В теущем документе" стоит подправить.
MoneyCraft пишет:
19.09.2008 @ 20:49
Оно корректно во всех браузерах работает?
Постоянная читательница пишет:
24.09.2008 @ 15:35
Автору блога… Читаю Ваш блог сравнительно недавно. Что хотелось бы отметить… (не подумайте что в чём то упрекаю или пытаюсь давать советы) Достаточно лаконичный дизайн, ничего лишнего я бы сказал))) Ваша тематика мне близка, и это радует. Но почему не пишите своё мнение о событиях, происходящих в мире, в плане событий международных например?? Понимаю, что “новостей хватает”, но иногда хочется узнать мнение обычного человека, так сказать - независимый взгляд, сравнить его со своим мнением. А так… Пишите ещё чаще, ещё больше, и ещё интереснее.. Спасибо!
JawsIk пишет:
29.09.2008 @ 16:23
Для MoneyCraft: Ну во всех, которые у меня были работает... пробуйте... вносите предложения или исправления
Для Постоянной читательниы: Тут понимаете дело в том, что политика и международные события - это достаточно обширная тема. Меня очень много волнует, что-то раздражает, а что-то откровенно бесит. Я давно уже понял, что Америка подыхает, и то что с Южно-Осетинским конфликтом вся хвалёная пендосовская армия лоханулась. И естественно, что вся европа (их СМИ) обосрались, потому что, как сказали недавно в камеди-клаб ... "дык европа уже давно не европейская, а американская". Всё это гадость и грязь, при этом грязь, которую нам пытаются навязать пендосы. Мы очень стоийкие и терпеливые (русские). И если мы будем работать с дипломатами-дипломатично, а врагам бить по морде и показывать зубы, то в ближайшее время мы станем достойным лидером этого мира. Это очень радует, потому что по языческо-земному расположению, территория Россия находиться на сердце земли, а территория Америки - на пищеварительной системе...
В общем это очень обширная тема, она никак не пересекается с принятой и устоявшейся здесь тематикой и поэтому я не обсуждаю такие вещи на своём блоге.
Успехов вам!
Renar пишет:
02.10.2008 @ 20:20
JawsIk, ты зря отвечал. "Постоянная читательница" это спамер. Очень похожие коментарии ниочем много раз встречал в блогах.
JawsIk пишет:
03.10.2008 @ 21:44
Спасибо Ренат, учту... в любом случае, другие тоже прочтут и не будут задавать почему я в этом дневнике не пишу про политику.
Ted_Baker пишет:
07.10.2008 @ 22:18
Очень полезная информацмя
amxm пишет:
07.10.2008 @ 23:43
Спасибо, помогли с субмитом disabled /enabled
JawsIk пишет:
19.10.2008 @ 15:58
Жаль, если это тоже были спамеры, а если нет, то без проблем... пользуйтесь
WiciN пишет:
17.11.2008 @ 10:57
Да, штука полезная, только если хоть один checkbox по умолчанию "checked" то submit не включается.
JawsIk пишет:
26.11.2008 @ 00:00
Очень даже может быть... ну значит нужно изначально циферки добавлять, мол сколько галок стоит и тогда будет работать. По умолчанию checkobj = 0 , ну поставь там к примеру checkobj = 2 , если пару галок стоит у тебя.