时间戳

首页 > 解决方案 > JQuery选中一个复选框，然后取消选中/禁用具有相同名称属性的其他人

javascript - JQuery选中一个复选框，然后取消选中/禁用具有相同名称属性的其他人

问题描述

我有三个输入复选框，它们都具有相同的名称属性，我希望其中一个被选中，然后其他的取消选中并禁用。我想在函数调用和更改事件中的 jquery 代码，如下面的代码或任何其他方式正常工作。

<div class="topmenuitems">
    <input type="checkbox" name="menu-item-topitemtypes" value="itemwithouticon" />
    <input type="checkbox" name="menu-item-topitemtypes" value="itemwithicon" />
    <input type="checkbox" name="menu-item-topitemtypes" value="itemicon" />
</div>

var itemWithIconCheckbox = $('.topmenitems input');
var topItemTypesFunc = function() {
    //Jquery code here
};
topItemTypesFunc();
topItemTypeCheckboxes.on( 'change', topItemTypesFunc);

标签： javascriptjquery

解决方案

您可以通过单选按钮执行您想要的功能。在这里，我在这里实现了一个简单的逻辑。当一个复选框被更改十个取消选中复选框，然后单击一个。这是一个工作示例。

$('input[name="menu-item-topitemtypes"]').on( 'change', function(){
  if($(this).prop('checked')){
    $('input[name="menu-item-topitemtypes"]').not($(this)).prop('checked', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topmenuitems">
    <input type="checkbox" name="menu-item-topitemtypes" value="itemwithouticon" />
    <input type="checkbox" name="menu-item-topitemtypes" value="itemwithicon" />
    <input type="checkbox" name="menu-item-topitemtypes" value="itemicon" />
</div>

推荐阅读