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

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

05.12.2013, 02:03. Просмотров 1359. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Как сделать невидимой кнопку, если количество добавленных полей максимально (jQuery):

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

Как сделать кнопку невидимой
надо создать проект, логическую игру. Создал картинку, формата 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
Привет! Вот еще темы с решениями:

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

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

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

Не получается сделать кнопку (SpeedButton) невидимой
Поставил на фон картинку через TImage, создал SpeedButton, поставил...


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

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

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