Форум

denisgaker · #1 (**permalink**) 18.06.2016, 07:46

Друзья, помогите пожалуйста разобраться с проблемой.

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

Я пробую при первом нажатии менять 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

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>

Rasy · #3 (**permalink**) 18.06.2016, 13:07

<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

Rasy,

Rasy · #5 (**permalink**) 18.06.2016, 16:59

рони,
?

рони · #6 (**permalink**) 18.06.2016, 17:35

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>

Форум

Справочник

Discord чат

Курсы javascript