Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
RastaFara
0 / 0 / 0
Регистрация: 23.01.2012
Сообщений: 27
1

Как сделать невидимой кнопку, если количество добавленных полей максимально

05.12.2013, 02:03. Просмотров 1388. Ответов 4
Метки нет (Все метки)

Доброго времени суток.

Столкнулся с такой проблемой...
Есть инпут поля и кнопка, добавить еще одно.. Одно поле стоит по дефолту, напротив добавленных - удалить..
Подскажите пожалуйста, как сделать та, чтобы при добавлении максимально позволенных полей, кнопка "Добавить" исчезала, и при удалении хотя бы одного - появлялась, путем замены стиля по ID display:none;

Вот исходной код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(function() {
        var scntDiv = $('#Names');
        var i = $('#Names p').size() + 1;
 
        $('#addScnt').live('click', function() {
            if (i <= 3) {
                $('<p class="contact-input"><input type="text" id="p_scnt" size="20" name="p_scnt[]" value="" /> <a href="#" id="remScnt">Удалить</a></p>').appendTo(scntDiv);
                i++;
            }
            return false;
        });
        $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
        });
});
</script>
HTML5
1
2
3
4
5
6
7
<div id="Names">
        <p class="contact-input">
            <input type="text" id="p_scnt" name="p_scnt[]" value="" />
        </p>
    </div>
    
    <a href="#" id="addScnt">Добавить</a>
Заранее спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.12.2013, 02:03
Ответы с готовыми решениями:

Как сделать таймер обратного отсчёта по нажатию на кнопку и сделать её неактивной
Снова пишу сюда, ибо нигде больше помощи не дождёшься:( Мне тут нужно сделать...

Как сделать кнопку невидимой
надо создать проект, логическую игру. Создал картинку, формата jpg и там...

Как в Delphi (2010) сделать кнопку невидимой?
Как в Delphi (2010) сделать кнопку невидимой? TSpeedButton -&gt; Flat -&gt; true...

Как сделать кнопку прозрачной или невидимой
Здравствуйте, у меня маленькая проблема, мешает кнопка красная(меню), как ее...

Как по нажатию кнопки, удалить(или сделать невидимой) другую кнопку?
Как по нажатию кнопки(1), удалить(или сделать невидимой) другую кнопку(2)? и...

4
c_k_rim
70 / 37 / 23
Регистрация: 05.12.2013
Сообщений: 118
05.12.2013, 03:09 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var inputMax = 8; //Максимальное количество
 
$(function() {
        $('#addScnt').live('click', function(){ //Кликнули "Добавить"
            if($('#Names p.contact-input').size() <= inputMax) { //Если количество инпутов меньше максимального
                $('<p class="contact-input"><input type="text" id="p_scnt" size="20" name="p_scnt[]" value="" /> <a href="#" class="remScnt">Удалить</a></p>').appendTo($('#Names'));
            }
            if($('#Names p.contact-input').size() >= inputMax) { //Если количество инпутов больше или равно максимальному
                $('#addScnt').hide(); //Скрываем кнопку
            }
            return false;
        })
        
        $('.remScnt').live('click', function(){ //Кликнули "Удалить"
            $(this).parent().remove(); //Удаляем
            if($('#Names p.contact-input').size() < inputMax) { //Если количество инпутов меньше максимального
                $('#addScnt').show(); //Показываем кнопку
            }
            return false;
        })
});
0
RastaFara
0 / 0 / 0
Регистрация: 23.01.2012
Сообщений: 27
05.12.2013, 04:22  [ТС] 3
Огромное спасибо! Все отлично работает!
Только вот один нюанс..
Например, у меня макс = 3
я их заполнил, засубмитил, (помимо них есть другие поля с проверкой) и хоть их 3 всеравно появляется кнопка Добавить, нажав на нее добавляется еще одно, после чего кнопка исчезает, появляется, только тогда, когда удалю 2 поля...

Вот какой html код получается после субмита формы

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div id="Names">
                <p class="contact-input">
                <input type="text" id="p_scnt" size="20" name="p_scnt[]" value="kuykuy" />
                </p>
                <p class="contact-input">
                <input type="text" id="p_scnt" size="20" name="p_scnt[]" value="uykuy" /><img src="imag/remove.png" width="22" height="10"  alt=""/><a href="#" class="remScnt" id="remScnt">Remove</a>
                </p>
                <p class="contact-input">
                <input type="text" id="p_scnt" size="20" name="p_scnt[]" value="uyjk" /><img src="imag/remove.png" width="22" height="10"  alt=""/><a href="#" class="remScnt" id="remScnt">Remove</a>
                </p>
    </div>
0
c_k_rim
70 / 37 / 23
Регистрация: 05.12.2013
Сообщений: 118
05.12.2013, 04:27 4
После строки
Javascript
1
$(function() {
напиши:
Javascript
1
if($('#Names p.contact-input').size() >= inputMax) { $('#addScnt').hide(); }
Это проверка после загрузки страницы. "Если инпутов больше или равно максимальному количеству, то кнопку надо скрыть."
0
RastaFara
0 / 0 / 0
Регистрация: 23.01.2012
Сообщений: 27
05.12.2013, 04:32  [ТС] 5
Все работает!
Огромное спасибо за помощь!!!
0
05.12.2013, 04:32
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.12.2013, 04:32

Сделать невидимой кнопку меню
чтобы при запуске программы кнопка была невидимой, а не после нажатия.

Сделать невидимой кнопку меню
Как сделать чтобы в зависимости от авторизовавшегося пользователя становились...

Сделать кнопку невидимой после нажатия
Здравствуйте. Я новичок в программировании на Андроиде (нужно разработать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru