Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2016, 07:46
Новичок на форуме
Отправить личное сообщение для denisgaker Посмотреть профиль Найти все сообщения от denisgaker
 
Регистрация: 18.06.2016
Сообщений: 1

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

Задача такова, необходимо сделать так, чтобы при нажатии на кнопку, активировалось поле для ввода текста. Это у меня получилось. Но нужно, чтобы при повторном нажатии на кнопку, поле для ввода текста снова становилось не активно.

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

Активировать поле ввода получается, сменить id тоже, а вот вернуть старый id по повторному клику и деактивировать поле ввода - нет.

Помогите пожалуйста.

Вот код:

<div class="new-grav">
<button class="btn-grav on" id="activevvod-1">
Гравировка на футляре
</button>
<input id="grav1" placeholder="Гравировка на футляре" disabled>
</div>
                
<div class="new-grav">
<button class="btn-grav" id="activevvod-2">
Гравировка на кошельке*</button>
<input id="grav2" placeholder="Александр" disabled>
</div>


$(function (){
    $("#activevvod-1").click(function() {
        $('#grav1').removeAttr('disabled');
        $('#activevvod-1').attr('id', '#activevvod-1-on');
        return false;
    });
});
    
$(function (){
    $("#activevvod-1-on").click(function() {
        $('#grav1').attr('disabled');
        $('#activevvod-1-on').attr('id', '#activevvod-1');
        return false;
    });    
});


Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2016, 09:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

disabled toggle
denisgaker,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script>
$(function() {
    $(".new-grav").each(function(indx, div) {
        $(".btn-grav", div).on("click", function() {
            $("input", div).prop("disabled", !$(this).toggleClass("on").is(".on"))
        })
    })
});
  </script>
</head>

<body>
<div class="new-grav">
<button class="btn-grav" id="activevvod-1">
Гравировка на футляре
</button>
<input id="grav1" placeholder="Гравировка на футляре" disabled>
</div>

<div class="new-grav">
<button class="btn-grav" id="activevvod-2">
Гравировка на кошельке*</button>
<input id="grav2" placeholder="Александр" disabled>
</div>


</body>
</html>

Последний раз редактировалось рони, 18.06.2016 в 10:08.
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2016, 13:07
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

<body>

<div class="new-grav">
<button class="btn-grav on" id="activevvod-1">
Гравировка на футляре
</button>
<input id="grav1" placeholder="Гравировка на футляре" disabled>
</div>
                
<div class="new-grav">
<button class="btn-grav" id="activevvod-2">
Гравировка на кошельке*</button>
<input id="grav2" placeholder="Александр" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
$('.new-grav').each(function() {
	var context = this,
  		$btn = $('button', context),
      $inp = $('input', context);
  
	$btn.on('click', function () {
  		if ($inp.prop('disabled')) {
      		$inp.prop('disabled', false);
      } else {
      		$inp.prop('disabled', true);
      }
  });
  
});
</script>

</body>
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2016, 13:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Rasy,
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2016, 16:59
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

рони,
?
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2016, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Rasy,
<body>
<meta charset="utf-8">
<div class="new-grav">
<button class="btn-grav on" id="activevvod-1">
Гравировка на футляре
</button>
<input id="grav1" placeholder="Гравировка на футляре" disabled>
</div>

<div class="new-grav">
<button class="btn-grav" id="activevvod-2">
Гравировка на кошельке*</button>
<input id="grav2" placeholder="Александр" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
$('.new-grav').each(function() {
  var context = this,
      $btn = $('button', context),
      $inp = $('input', context);

  $btn.on('click', function () {
	$inp.prop('disabled', !$inp.prop('disabled'));
  });

});
</script>

</body>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Условие для отображения кнопки навигации по просмотренным страницам solomon2 Events/DOM/Window 4 30.10.2015 11:43
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Определение "Больше" или "Меньше" после нажатия кнопки JFloyd Общие вопросы Javascript 1 01.12.2014 17:27
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30
Получение ссылки на объект в обработчике нажатия кнопки pauluss ExtJS 1 22.06.2011 15:27