0

Есть у меня input, которое лежит в div'e. На div'e висит CSS ошибки/ корректного ввода в input. Как сделать так, чтобы нажав на checkbox, я сбрасывал поле inputи приводил divк первоначальным настройкам (то есть к тем, которые были активны до взаимодействия с полем ввода)? То есть проблема в том, что когда я нажимаю в поле ввода, border div'a красится в зависимости от корректности ввода данных. Но сбрось я input (.value=""), цвет на div рамке остается, т.к. классы актуальны. Обратись к родителю input'a (после взаимодействия с checkbox'ом), и в классы заново пропиши первоначальные стили, то, к примеру, flexbox смещается.

<div class="field">
  <input type="text">
</div>
<input type="checkbox">
3
  • Сам ты ксс. ЦСС!
    – T0xee.n17
    Commented 15 июн. 2018 в 17:27
  • описание п...ц товарищи...
    – EVG
    Commented 15 июн. 2018 в 18:16
  • Добавьте пример того, что вы хотите получить, судя по комментариям.. большая часть людей не поймёт чего вы хотите.
    – Arthur
    Commented 15 июн. 2018 в 18:42

2 ответа 2

0

Держите. Запоминает название класов при нажатии инпута и дива. Если убираешь - восстанавливает названием классов.

var className; // будем хранить изнчальное имя класса стилей css input
var divClassname // будем хранить изнчальное имя класса стилей css div
$('input[type=checkbox]').on('click',function(e){
var $checkbox = $(e.target)
if ($checkbox.prop('checked')){ // если галка отмечена .
var $div = $($checkbox.prev('div')[0]) // находим элемент div
var $input = $($checkbox.prev('div').find('input[type=text]')[0]); // находим ближайший input который лежит не на одном уровне в блоке div.
className = $input.attr('class') // запоминаем название класса которое было изначально.
divClassname = $div.attr('class') // запоминаем название класса которое было изначально.
$input.removeAttr('class'); // удаляем название класса инпута.
$div.removeAttr('class'); // удаляем название класса дива.
console.log($input[0]);
console.log($div[0]);
} else { // если галка не стоит на чекбоксе.
	var $input = $($checkbox.prev('div').find('input[type=text]')[0]),
	$div = $($checkbox.prev('div')[0]);
	$input.addClass(className) // Возобнавляем значение импута если чекбокс не нажат.
	$div.addClass(divClassname) // Возобнавляем значение дива если чекбокс не нажат.
 console.log($input[0])
 console.log($div[0])
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "field">
  <input type = "text" class="error"> <!-- изначально класс error -->
</div>
<input type = "checkbox">

0

$(document).ready(function() {
  $('input[type=checkbox]').click(function() {
    // Удалить или добавить в зависимости от того находится или нет
    $('.field > input').toggleClass('err init')
  })
});
input{
 margin: 1px;
}
.err {
  color: red;
  border: 1px solid red;
}

.init {
  border: 2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
  <input type="text" class="inpt init">
  <br>
  <input type="text" class="inpt init">
</div>
<input type="checkbox">

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.