Tab as radio select 并清除选项卡上的复选框更改基础 6

Question

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

显示选项

显示给所有人
全部隐藏
显示特定
隐藏特定

这些是选项卡，也是单选按钮 select

（看起来像单选按钮，但检查后会切换到它的选项卡内容）

并且每个选项卡内容都有自己的复选框 select 列表（"show for all" 和 "Hide for all" 除外）

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

基础 6，Jquery，CSS

Answer 1

这道题的目的是用一个表格，所以你可以select item showing options，根据你的select会有可用的item可以展示。

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>

如您所见，我拒绝了对内容进行 tab 的想法，而是使用了禁用输入字段的方法，因此它将禁止选中的项目粘贴到 POST 正文中，并且还可以防止它们丢失你可以改变你的决定

Tab as radio select 并清除选项卡上的复选框更改基础 6

Tab as radio select and clear checkboxes on tab change foundation 6

html

javascript

jquery

zurb-foundation