Javascript/html:make Input Fields Required On Checkbox Check
So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please h
Solution 1:
Give this a try:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
<form name="test" id="test" action="#" method="GET">
<div class="input-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="cbox">
<label class="form-check-label" for="cbox">Make field required</label>
</div>
</div><br>
<div class="input-group">
<input type="text" id="tbox" class="form-control">
</div><br>
<button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
<small><span class="status"></span></small>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// On click of checkbox
$('#cbox').click(function() {
// Check if it's checked
if ($(this).prop('checked')) {
// Add the required attribute to the text input
$('#tbox').attr('required', '');
// log our results and display a small indicator span status
console.log('input is now required');
$('.status').text('input is now required');
} else {
// If it isn't checked, remove the required attribute
$('#tbox').removeAttr('required');
// log our results and display a small indicator span status
console.log('input is no longer required');
$('.status').text('input is no longer required');
}
});
});
</script>
</body>
</html>
Post a Comment for "Javascript/html:make Input Fields Required On Checkbox Check"