在选中复选框时显示数据
[英]display data on selecting a checkbox
问题描述
I have 3 checkboxes 
我有3个复选框
<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 和一个包含2个输入的div
<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. 可以正常选择“ Permanent和Contract复选框，但是我希望在未选中“驱动器”复选框之前，div应该保持禁用状态，当用户选择“驱动器”时，他应该能够从div中选择值，并且如果他再次取消选中“驱动器”复选框，div应该再次被禁用。
I tried to follow this code but it didnt seemed to work for me, can anyone please tell how it can be done 我尝试遵循此代码，但它似乎对我没有用，任何人都可以告诉我如何完成它
6 个解决方案
解决方案1
2 已采纳 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);
解决方案2
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>
解决方案3
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();
}
}
解决方案4
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>
解决方案5
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);
}
});
});
解决方案6
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: 执行此操作的最短方法（就代码文本而言）是为Drive复选框提供一个jQuery脚本，当其值更改时，该脚本将运行：
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
And let the date and time inputs be disabled when the document loads. 并在加载文档时禁用日期和时间输入。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.