Javascript-форум - добавить required в зависомости от значения

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - добавить required в зависомости от значения (https://javascript.ru/forum/dom-window/72918-dobavit-required-v-zavisomosti-ot-znacheniya.html)

добавить required в зависомости от значения

Собственно, вот:

<form action="#">
<input type="text" id="test">
<input type="text" id="lol1">
<input type="text" id="lol2">
<input type="text" id="lol3">
<input type="submit">
</form>

$(document).ready(function(){
$("#test").change(function(){
var val = $("#test").val();

     if (val <= 100){
$("#lol1").attr('required');
$("#lol2").removeAttr('required');
$("#lol3").removeAttr('required');

      }else if (val > 100 && val <=150){
$("#lol1").attr('required');
$("#lol2").attr('required');
$("#lol3").removeAttr('required');

   }else if (val > 150 && val <=200){
$("#lol1").attr('required');
$("#lol2").attr('required');
$("#lol3").attr('required');

    }else if (val ==""){
$("#lol1").removeAttr('required');
$("#lol2").removeAttr('required');
$("#lol3").removeAttr('required');
}
  });
	});

Как понятно с кода, у меня есть поле test, и туда я буду вписывать цифры, и в зависимости от вписанной цифры одни поля должны быть с required, другие без.
Если в поле test значение пустое, то аттрибут required в полях не нужен.
Код почему-то не работает :(
(в jsfiddle тестирую)
ЧЯДНТ?

Почитать тут.

Цитата:

Сообщение от laimas (Сообщение 479925)

Почитать тут.

а почему attr не подходит?
(c prop уже пробовал, не вышло тоже)

Цитата:

Сообщение от maksqwerty

а почему attr не подходит?

Потому, что это не атрибут, это свойство. Наглядный пример можно посмотреть со списком. Даже не задавая атрибут selected первой опции, она будет выбрана в списке. Выбор любой опции делает ее выбранной, но никаких атрибутов при этом в них не будет.

$("#lol1").prop('required', true);
$("#lol1").prop('required', false);

так пробовали?

https://jsfiddle.net/dj1cm4Lk/
всё-ровно :(

Цитата:

Сообщение от maksqwerty

всё-ровно

У вас должно быть так

$(selector).prop('required', $(selector).length)

и будут нужный результат.

maksqwerty,
Jquery подключать не пробовали?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<form action="#">
		<input type="text" id="test">
		<input type="text" id="lol1">
		<input type="text" id="lol2">
		<input type="text" id="lol3">
		<input type="submit">
	</form>

	<script>

		$(document).ready(function(){
			
			$("#test").change(function(){
				var val = $("#test").val();
				if (val <= 100){
					
					$("#lol1").prop('required',true);
					$("#lol2").prop('required',false);
					$("#lol3").prop('required',false);
					
					
				}else if (val > 100 && val <=150){
					
					$("#lol1").prop('required',true);
					$("#lol2").prop('required',true);
					$("#lol3").prop('required',false);
				}else if (val > 150 && val <=200){
					
					$("#lol1").prop('required',true);
					$("#lol2").prop('required',true);
					$("#lol3").prop('required',true);
				}else if (val ==""){
					
					$("#lol1").prop('required',false);
					$("#lol2").prop('required',false);
					$("#lol3").prop('required',false);
				}
			});
		});	


	</script>
</body>
</html>

j0hnik,
ну как не стыдно. :)

$("#lol1,#lol2,#lol").prop('required',false);