Как сделать неактивным поле input если нажат checkbox в форме
javascript (джаваскрипт) / HTML (хтмл)
Тэги: javascript полезные скрипты html формы
Тэги: javascript полезные скрипты html формы
📅11-03-2018 👁818
Как сделать неактивным поле input (инпут) если нажат checkbox (чекбокс) в form форме
И наоборот, если чекбокс не выделен, форма доступна для ввода данных.
При нажатии нужно очистить содержимое текстового поля input
Решение такое:
<script type="text/javascript">
window.onload = init;
function init (){
// ждем клика на чекбоксе
var chkbox = document.getElementById('chkbox1');
chkbox.onclick = checkoutDisable;
}
function checkoutDisable(eventObj){
// клик есть, проверяем предыдущее состояние и изменяем поле input
if (eventObj.target.checked) {
document.getElementById('inp1').value = '';
document.getElementById('inp1').disabled = true;
} else {
document.getElementById('inp1').disabled = false;
}
return true;
}
</script>
<form method="post" action="" id="form1">
<input type='text' name='inp1' id='inp1'>
<label><input type='checkbox' name='chkbox1' id='chkbox1'>check it</label><br>
<input type='submit' name='btn' value='submit'>
</form>
Тот же вариант но немного короче:
<script type="text/javascript">
function checkoutDisable(event){
// передался true или false
t = document.getElementById('inp1');
if (event) {
t.value = '';
t.disabled = true;
} else {
t.disabled = false;
}
return true;
}
</script>
<form method="post" action="" id="form1">
<input type='text' name='inp1' id='inp1'>
<label><input type='checkbox' name='chkbox1' id='chkbox1' onclick="checkoutDisable (this.checked)">check it</label><br>
<input type='submit' name='btn' value='submit'>
</form>
Оставить свой ответ: