Chekbox, чтобы включать и выключать input

313

11 июля 2017, 19:07

Как сделать такое дополнение к input в виде checkbox, чтобы он выключал и включал input?

Answer 1

Пример решения c использованием jQuery:

https://jsfiddle.net/tj9v02fk/

$(".button").on("change", function() { 
  if ($('.button').is(':checked')) { 
    $(".text-box").removeAttr('disabled'); 
  } else { 
    $(".text-box").attr('disabled', true); 
  } 
})

<div class="parent"> 
  <input type="checkbox" class="button" id="button"> 
  <label for="button"></label> 
  <input type="text" class="text-box" disabled="disabled"> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

Оба элемента помещаем в div и позиционируем абсолютно. Как-то так:

$(".check").change(function() { 
  if ($(this).is(':checked')) { 
    $(".text").attr('disabled', false); 
  } else { 
    $(".text").attr('disabled', true); 
  } 
});

.container { 
  position: relative; 
  width: 500px; 
  height: 50px; 
} 
 
.check { 
  position: absolute; 
  top: 0px; 
  left: 20px; 
  width: 50px; 
  height: 50px; 
  z-index: 100; 
} 
 
.text { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  height: 50px; 
}

<div class="container"> 
  <input type="checkbox" class="check"> 
  <input type="text" class="text"> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>