Question

我有两个复选框。一个用于显示列，另一个用于显示列中的项目。用户可以检查以使列名可见，而无需选中该框以显示列中的项目。但是，如果用户选中该框以显示列的项目。必须选中显示列的复选框，因为您无法在列中显示项目，也不会使列可见。

我在思考一种逻辑方面会遇到一些麻烦，而这种逻辑不会绕圈子。

    <div>
        <div class="span3">Column is visible:</div>
        <div class="span9"><input type="checkbox" data-name="viewable" data-bind="checked: columnViewable" /></div>
    </div>
    <div>
        <div class="span3">Column items are visible:</div>
        <div class="span9"><input type="checkbox" data-name="viewableItems" data-bind="checked: columnItemsViewable" /></div>
    </div>

这就是我对js所拥有的：

     editElement.editElement = function () {
                    if (editElement.viewableItems()) {
                        editElement.columnViewable = ko.observable(true);
                        var columnView = editElement.columnViewable();
                    }
                    else
                        columnView = editElement.columnViewable();

                    grain.Ajax.Post({..submit data including checked boxes...})
      };

如果两个框都未选中，并且如果我检查viewableItems并保存它将自动将列设置为true，它对我来说工作正常。但是如果两者都被选中并且我取消选中列可见性并保存 - 它将重新检查列可见性，因为检查了viewableItems。

我是否应该禁用viewableItems复选框，如果取消选中可查看列，则两者都将设置为false？

Answer 1

你不需要很多逻辑。这是一个非常简单的jQuery解决方案：

＆＃13;

$('#column,#item').hide();

function displayCol(check) {
  if (check) {
    $('#column').show();
  } else {
    $('#column').hide();
    $('#itemChanger').prop('checked',false);
  }
}

function displayItem(check) {
  if (check) {
    $('#column,#item').show();
    $('#columnChanger').prop('checked',true);
  } else {
    $('#item').hide();
  }
}

＆＃13;

#column {
  width: 200px;
  height: 200px;
  background: green;
}
#item {
  width: 100px;
  height: 100px;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="column">Column
  <div id="item">Item</div>
</div>
Show Column:
<input type="checkbox" id="columnChanger" onchange="displayCol(this.checked)" />
<br/>Show Item:
<input type="checkbox" id="itemChanger" onchange="displayItem(this.checked)" />

＆＃13;

Answer 2

我这样做的方法是，如果取消选中显示列，则禁用显示项目输入，并尝试使两个控件尽可能彼此独立地运行：

HTML：

<div class="column">
    <h1 class="title">Column 1</h1>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <div class="controls">
        <input id="show-items-1" class="show-items" type="checkbox" checked="checked" />
        <label for="show-items-1">Show items</label>
        <br/>
        <input id="show-column-1" class="show-column" type="checkbox" checked="checked" />
        <label for="show-column-1">Show column</label>
    </div>
</div>
<div class="column">
    <h1 class="title">Column 2</h1>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <div class="controls">
        <input id="show-items-2" class="show-items" type="checkbox" checked="checked" />
        <label for="show-items-2">Show items</label>
        <br/>
        <input id="show-column-2" class="show-column" type="checkbox" checked="checked" />
        <label for="show-column-2">Show column</label>
    </div>
</div>

JS：

$("input", this).on("change", function () {
    var state = $(this).is(":checked"),
        showColumn = $(this).attr("class").search(/column/) > -1,
        elems = $(this).parents(".column").find("p");
    if (state) {
        if (showColumn) {
            $(this).siblings(".show-items").removeAttr("disabled");
            elems = $(this).siblings(".show-items").is(":checked") ? elems = $(this).parents(".column").find("h1,p") : $(this).parents(".column").find("h1");
        }
        elems.removeClass("hidden");
    } else {
        if (showColumn) {
            $(this).siblings(".show-items").attr("disabled", true);
            elems = $(this).parents(".column").find("h1, p");
        }
        elems.addClass("hidden");
    }
});

的jsfiddle：

这是一个有效的JSFiddle供参考。

在两个复选框之间切换

2 个答案:

HTML：

JS：

的jsfiddle：