Как сбросить поле ввода с его стилями?

350

19 июля 2018, 06:30

Есть у меня 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">

Answer 1

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

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">

Answer 2

$(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">