在兩個復選框之間切換

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已選中。

如果未選中viewable列，則是否應該禁用viewableItems復選框，那樣兩者都將設置為false？

Answer 1

您不需要很多邏輯。 這是一個非常簡單的jQuery解決方案：

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

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

 <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)" /> 

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供參考。