Подключаем библиотеку jQuery, вставляем в блок HEAD.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</head>
Наша html разметка: чекбокс и текстовое поле которое нам нужно скрыть.
<div class="box">
<input type="checkbox" id="checkbox" name="checkbox" />
<input class="inp" type="text" name="inp" />
</div>
Немного магии на JS + jQuery
<script>
$(document).ready(function() {
// Данный механизм устанавливает атрибут checked в нашем чекбоксе, где срабатывает условие для самого чекбокса.
$('input[type="checkbox"]' ).on( "click", function() {
if($(this).is(":checked")) {
$(this).attr('cheked', 'cheked');
} else {
$(this).removeAttr('cheked', 'cheked');
}
});
// Механизм который отвечает за отключение и включения ввода информации в поле input=text
$('#checkbox').on('click', function(event) {
if($('#checkbox').is(':checked')) {
$('.box').find('.inp').attr('disabled', 'disabled');
} else {
$('.box').find('.inp').removeAttr('disabled');
}
});
});
<script>
Голосов: 1557 | Просмотров: 7578