选择复选框时显示数据

display data on selecting a checkbox

本文关键字：数据 显示 复选框 选择      更新时间：2023-09-26

我有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);

这是一把小提琴。

试试这个：

必需库：<剧本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>


$(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 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'))

并在加载文档时禁用日期和时间输入。

相关文章：