Охотник на зелёных

Итак сегодня мне понадобилось сделать одну фичу в своём новом прожекте. Проект достаточно обширный, чтобы объянять что и как и поэтому я расскажу о самой сути этой “фичи”.

Задача состояла в том, чтобы админ мог удалять пользователей из базы. Итак задаём параметры поиска и 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”. Т.о. включив данное свойство мы сделаем нашу кнопку неактивной, а выключив свойство, наша кнопка снова станет активной.

Успехов всем!

Рекомендую почитать

| |