在两个复选框之间切换

Question

I have two check boxes. One for showing a column and the other for showing an item in the column. A user can check to make a column name visible without having to checking the box to show an item within the column. But if the user checks the box to show an item of a column. The checkbox for showing the column must be checked because you cannot make an item visible within a column without making the column visible as well.

I am having some trouble thinking of a logic that will do that without going in circles.

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

This is what i have for 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...})
      };

It is working fine for me if both boxes are unchecked and if i check the viewableItems and save it will automatically set the column to true. But if both are checked and i uncheck the column visibility and save - it will recheck the column visibility because the viewableItems is checked.

Should i disable the viewableItems checkbox if the viewable column is unchecked that way both will be set to false?

Answer 1

You don't need a whole lot of logic for this. Here's a VERY simple jQuery solution:

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

The way I would do this is by disabling the Show Items input if Show columns is unchecked, and by trying for both controls to run as independently from one another as possible:

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:

Here is a working JSFiddle for reference.