display data on selecting a checkbox
Question
I have 3 checkboxes
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
and a div that contains 2 inputs
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
Checkbox Permanent and Contract can be selected normally, but i want that till the time Drive checkbox is not selected, the div should stay disabled, when the user selects Drive, he should be able to select values from div and if he again unchecks the Drive checkbox the div should get disabled again.
I tried to follow this code but it didnt seemed to work for me, can anyone please tell how it can be done
6 answers
solution1
2 ACCPTED 2015-11-21 09:45:23
You could disable/enable the time controls like this:
function setDateTimeAvailability() {
var checked = $("#inlineCheckbox2").is(':checked');
$("#datetime input").attr('disabled', !checked);
// Or, if you prefer to hide, do:
// $("#datetime").toggle(checked);
}
$("#inlineCheckbox2").change(setDateTimeAvailability);
// Make sure on page load the datetime availability is set correctly
$(setDateTimeAvailability);
Here is a fiddle .
solution2
1 2015-11-21 09:30:58
$(document).ready(function() { $("#inlineCheckbox2").change(function() { //dissable if check box not selected var dissable = !$(this).is(':checked'); //set all .form-controls dissabled $('.form-control').each(function() { $(this).attr('disabled', dissable); }); }); //set initail status $("#inlineCheckbox2").trigger("change"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="chk[]" id="inlineCheckbox1" value="Permanent">Permanent <input type="checkbox" name="chk[]" id="inlineCheckbox2" value="Drive">Drive <input type="checkbox" name="chk[]" id="inlineCheckbox3" value="Contract">Contract <div id="datetime"> <input type='text' class="form-control" name="datee"> <input type='text' class="form-control" name="timee"> </div>
solution3
1 2015-11-21 09:46:59
Try this out:
Required Library: <script src="//code.jquery.com/jquery-1.11.3.min.js">
$(function() {
HideDiv();
});
$("#inlineCheckbox2").on('change', function() {
HideDiv();
});
function HideDiv() {
if ($("#inlineCheckbox2").is(':checked')) {
$("#datetime").show();
} else {
$("#datetime").hide();
}
}
solution4
1 2015-11-21 09:56:24
Try below code :
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
<div id="datetime" style="display:none;">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
<script>
$("#inlineCheckbox2").change(function(){
if($(this).is(':checked')){
$("#datetime").show();
} else{
$("#datetime").hide();
}
});
</script>
</body>
solution5
1 2015-11-21 10:14:54
Check this one:
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").prop('disabled', true);
$('#inlineCheckbox2').change(function(){
var checked = $("#inlineCheckbox2").is(':checked');
if (checked == true)
{
$(".form-control").prop('disabled', false);
}
else
{
$(".form-control").prop('disabled', true);
}
});
});
solution6
0 2015-11-21 10:01:47
The shortest way to do this (in terms of code text) is to give the Drive checkbox a jQuery script to run when its value is changed:
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
And let the date and time inputs be disabled when the document loads.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.