Question

我有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，但它似乎对我不起作用，任何人都可以告诉我们如何做到这一点

Answer 1

您可以禁用/启用时间控件，如下所示：

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。

Answer 2

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

Answer 3

试试这个：

必需的资料库：＆lt;脚本 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();
    }
}

Answer 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>

Answer 5

检查一下：

<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

Answer 6

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

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

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

选择复选框

6 个答案: