在选中复选框时显示数据答案

【问题标题】：display data on selecting a checkbox在选中复选框时显示数据
【发布时间】：2016-02-23 19:56:24
【问题描述】：

我有 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 可以正常选中，但我希望在未选中 Drive 复选框之前，div 应保持禁用状态，当用户选择 Drive 时，他应该能够从 div 中选择值如果他再次取消选中 Drive 复选框，则 div 应该再次被禁用。

我尝试关注这个code，但它似乎对我不起作用，谁能告诉它怎么做

【问题讨论】：

我建议您尝试.show() 和.hide() 方法，但它们会使页面建模变得棘手。不过，值得一试。

标签： javascript jquery html ajax checkbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以像这样禁用/启用时间控制：

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

这是fiddle。

【讨论】：

这是所有+10中最好的答案。
$("#inlineCheckbox2").on("change",setDateTimeAvailability).change();
@mplungjan，为什么要再次触发change？它已经被用户交互触发了，setDateTimeAvailability 不需要触发它。
@trincot 确保在加载时触发它 - 所以附加事件处理程序并触发它。就是这样做的
@mplungjan，我不同意，复选框的值在加载时不会改变。这是一个设置的属性，但与change 事件无关。

【解决方案3】：

试试这个：

所需库：

$(function() {
    HideDiv();
});

$("#inlineCheckbox2").on('change', function() {
    HideDiv();
});

function HideDiv() {
    if ($("#inlineCheckbox2").is(':checked')) {
        $("#datetime").show();
    } else {
        $("#datetime").hide();
    }
}

【讨论】：

【解决方案4】：

试试下面的代码：

    <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】：

执行此操作的最短方法（就代码文本而言）是为 Drive 复选框提供一个 jQuery 脚本，以便在其值更改时运行：

onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))

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

【讨论】：

【解决方案6】：

检查这个：

<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);
        }
    });
});

Check Here

【讨论】：