Использование Jquery для установки требуемого значения на основе входного значения - PullRequest
Новая
       30

Использование Jquery для установки требуемого значения на основе входного значения

1 голос
/ 08 марта 2020

Я хочу изменить обязательный атрибут ввода HTML, если значение другого ввода больше 8. (без отправки чего-либо) 

<input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">

В основном, если значение inputCheck больше чем 8, установите для rquired of inputReact значение true. Я знаю, как изменить атрибут, проблема заключается в проверке значения без отправки.

Ответы [ 3 ]

1 голос
/ 08 марта 2020

Вы можете использовать input слушатель 

let checkBox = document.getElementById("inputCheck")
, textBox = document.getElementById("inputReact")

checkBox.addEventListener("input", evt => {  
  if(evt.target.value > 8) textBox.setAttribute("required", true)
  else textBox.removeAttribute("required")
})
<input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">
0 голосов
/ 08 марта 2020 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keydown demo</title>
 
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<form>
 <input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">
</form>

 
<script>
var xTriggered = 0;
$(document).ready(function()
{
alert("ok");
$( "#inputCheck" ).keydown(function( event ) {

 var myLength = $("#inputCheck").val().length;

if((myLength+1) > 8)
{

$("#inputReact").attr("required","true");
}
});
 
});
</script>
 
</body>
</html>
0 голосов
/ 08 марта 2020

Добавьте прослушиватель события изменения в необходимое поле ввода. 

$('#inputCheck').change(function() {
    const value = $(this).val();
    const rInput$ = $('#inputReact');
    if(value > 8) { // could also use parseInt(value) to convert value into number if it isn't already.
        rInput$.attr('required', true); 
    } else {
        rInput$.removeAttr('required');
    }
});
...