Question

我正在尝试制作带有显示选项的标签。喜欢：

显示选项

全部显示
隐藏所有人
显示特定内容
隐藏特定内容

这些是标签，也是单选按钮

（看起来像单选按钮，但在选中状态会切换到其标签内容）

每个标签内容都有其自己的复选框选择列表（“全部显示”和“全部隐藏”除外）

但是，在显示选项更改时，需要取消选中所有其他标签的内部内容

Foundation 6，Jquery，CSS

Answer 1

此问题的目的是使用表格，因此您可以选择显示选项的项目，然后根据您的选择将显示可用的项目。

FORM.HTML

<div class="row">
    <div class="medium-12 columns">
        <ul class="clear-list">
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="all" checked>
                    Show on all pages
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="none">
                    Don't show on any page
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="selected">
                    Show only on selected
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="except">
                    Show on all except selected
                </label>
            </li>
        </ul>
        <script>
            $(document).ready(function () {
                $("input[name=module_show_option]:radio").click(function () { // attack a click event on all radio buttons with name 'radiogroup'

                    if ($(this).val() == 'all') {
                        $("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
                    }  else if ($(this).val() == 'none') {
                        $("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
                    } else if ($(this).val() == 'selected') { //check which radio button is clicked
                        $("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
                    } else if ($(this).val() == 'except') { //check which radio button is clicked
                        $("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
                    }
                });
            });
        </script>
    </div>
</div>

<div class="row">
    <div class="medium-12 columns">
        <label>
            <input type="checkbox" name="module_menu_item_id" value="1">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="2">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="3">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="4">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="4">
        </label>
    </div>
</div>

如您所见，我已经拒绝了制表内容的想法，而是使用了禁用输入字段，因此它将禁止将选中的项目粘贴到POST正文中，并且还可以防止丢失它们，同时您可以决定自己的决定< / p>

选项卡作为单选选项卡，并清除选项卡更改基础6上的复选框

1 个答案: