NetmenCC

Ошибка появляется, потому что её добавление идёт отдельной командой, а изменение css - часть предыдущей. Правильно будет примерно так:

$('#form').submit(function() {
    var faults = $('input').filter(function() {
        var thisReturn = $(this).data('required') && $(this).val() === "";
        if (thisReturn === true) {
            error.innerHTML = ('<span style="color:#e74c3c">Введите пароль</span>');
        }
        return thisReturn ;})
    .css("border-color", "red");
    
    if(faults.length) return false; 
});

Вы сначала присваиваете переменной chkVal значение value чекбокса, а потом меняете его (value чекбокса), НО в переменной chkVal остаётся старое значение.

Примеры выхода из ситуации:

<script type="text/javascript">

$(document).ready(function(){ 
	$('.checkbox').on('change', function (e) {
		var chk = $(this).attr("id");

		if($(this).is(':checked')) {
			$(this).parent().parent().css('background','none');	
			$(this).val('1');
		} else {
			$(this).parent().parent().css('background','rgba(0, 123, 255, 0.1)');
			$(this).val('0');
		}
		
		var chkVal = $(this).attr("value");
		
		$.ajax({
			url: '1.php',
			type: 'post',
			data: {id: chk, chkVal: chkVal },
			success: function(data) {}
		});

	});	
});

</script>

<script type="text/javascript">

$(document).ready(function(){ 
	$('.checkbox').on('change', function (e) {
		var chk = $(this).attr("id");
		var chkVal = $(this).attr("value");

		if($(this).is(':checked')) {
			$(this).parent().parent().css('background','none');	
			$(this).val('1');
			chkVal = 1;
		} else {
			$(this).parent().parent().css('background','rgba(0, 123, 255, 0.1)');
			$(this).val('0');
			chkVal = 0;
		}
		
		$.ajax({
			url: '1.php',
			type: 'post',
			data: {id: chk, chkVal: chkVal },
			success: function(data) {}
		});

	});	
});

</script>