[英]display data on selecting a checkbox
我有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
和一个包含2个输入的div
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
可以正常选择“ Permanent
和Contract
复选框,但是我希望在未选中“驱动器”复选框之前,div应该保持禁用状态,当用户选择“驱动器”时,他应该能够从div中选择值,并且如果他再次取消选中“驱动器”复选框,div应该再次被禁用。
我尝试遵循此代码,但它似乎对我没有用,任何人都可以告诉我如何完成它
您可以像这样禁用/启用时间控件:
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);
这是一个小提琴 。
$(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>
试试看:
必需的库: <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();
}
}
试试下面的代码:
<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>
检查一下:
<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);
}
});
});
执行此操作的最短方法(就代码文本而言)是为Drive复选框提供一个jQuery脚本,当其值更改时,该脚本将运行:
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
并在加载文档时禁用日期和时间输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.