Question

我的表格中有3行复选框。当且仅当第一行中仅检查第三个复选框时，我才希望后两行可用。截至目前，我一直在显示所有三行，所以我很可能没有正确地调用JQuery。

此外，如果表单自动缩放以考虑隐藏/显示时行的丢失/增益，那将是很好的。这是否自动发生（如果有所不同，我正在使用Bootstrap）。

以下是代码：

JQuery的

<body>
  <script>
    $(function showHide() {
        $("name=checkboxes").click(function() {
            if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) {
                $('#group2').hide();
                $('#group3').hide();
            }
        });
    });
  </script>
</body>

HTML

      <form class="form-horizontal">
        <fieldset>
          <!-- Form Name -->
          <legend>Select Entities to Search For</legend>
          <!-- Multiple Checkboxes (inline) -->
          <div class="form-group" id="group1">
            <label class="col-md-4 control-label" for="checkboxes">Table(s)</label>
            <div class="col-md-4">
              <label class="checkbox-inline" for="checkboxes-0">
                <input type="checkbox" name="checkboxes" id="checkboxes-farms" value="1">
                  Farms
              </label>
              <label class="checkbox-inline" for="checkboxes-1">
                <input type="checkbox" name="checkboxes" id="checkboxes-fields" value="3">
                  Fields
              </label>
              <label class="checkbox-inline" for="checkboxes-2">
                <input type="checkbox" name="checkboxes" id="checkboxes-cropzones" value="5">
                  Cropzones
              </label>
            </div>
          </div>
          <!-- Multiple Radios (inline) -->
          <div class="form-group" id="group2">
            <label class="col-md-4 control-label" for="checkboxes">Cropyear</label>
            <div class="col-md-4"> 
              <label class="checkbox-inline" for="checkboxess-0">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-cropyear" value="2014">
                  2014
              </label>
            </div>
          </div>
          <!-- Multiple Checkboxes (inline) -->
          <div class="form-group" id="group3">
            <label class="col-md-4 control-label" for="checkboxes">Crop</label>
            <div class="col-md-4">
              <label class="checkbox-inline" for="checkboxes-0">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-corn" value="100">
                  Corn
              </label>
              <label class="checkbox-inline" for="checkboxes-1">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-soybeans" value="200">
                  Soybeans
              </label>
            </div>
          </div>
        </fieldset>
      </form>

Answer 1

尝试：

$(document).ready(function(){
    $("input[name='checkboxes']").change(function () {
        if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) {
            $('#group2,#group3').show();
        } else {
            $('#group2,#group3').hide();
        }
    });
});

Fiddle here.

Answer 2

$(function() {
    $('[name="checkboxes"]').on('change', function() {
        var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked');
        $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked));
    }).trigger('change');
});

FIDDLE

Answer 3

您最初需要隐藏它们 - 建议在jquery文档就绪函数中执行此操作，例如：

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});

我会在复选框中附加一个“更改”事件，以控制其他字段的显示。

如果你需要在jsfiddle或类似的地方弹出一个例子，请告诉我。

用于显示/隐藏表单元素的JQuery代码

3 个答案: