Включение и выключение кнопки
Друзья, помогите пожалуйста разобраться с проблемой.
Задача такова, необходимо сделать так, чтобы при нажатии на кнопку, активировалось поле для ввода текста. Это у меня получилось. Но нужно, чтобы при повторном нажатии на кнопку, поле для ввода текста снова становилось не активно. Я пробую при первом нажатии менять 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;
});
});
Спасибо! |
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>
|
<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>
|
Rasy,
:blink: |
рони,
? |
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>
|
| Часовой пояс GMT +3, время: 12:25. |