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

Question

我试图制作带有显示选项的选项卡。 比如：

显示选项

• 为所有人显示
• 为所有人隐藏
• 显示特定
• 隐藏特定

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

(看起来像单选按钮，但在选中切换到它的选项卡内容(

每个标签页内容都有自己的复选框选择列表("全部显示"和"全部隐藏"除外(

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

Foundation 6， Jquery， CSS

Answer 1

这个问题的目的是将其用作表单，因此您可以选择显示选项的项目，并且根据您的选择将有可用的项目进行显示。

形式

.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正文中，并且还可以在您可以做出决定时保护它们不会丢失