在没有 jQuery 的情况下制作一个独占的复选框答案

【问题标题】：Making a checkbox exclusive without jQuery在没有 jQuery 的情况下制作一个独占的复选框
【发布时间】：2020-02-26 20:37:10
【问题描述】：

我正在运行一个内置调查的 Laravel 项目，我有一个问题，其中包含通常的“这些都不是”答案。选中此答案后，应清除并禁用所有其他答案。

我的 JS 技能很弱，因为我只使用 jQuery 来增强 PHP 项目的前端元素。

这是我使用jQuery创建的解决方案

$('[name=q2_5]').change(function(){
    var props = {'disabled': true, 'checked': false};
    if($(this).is(':checked')){
        $('[name=q2_1]').attr(props);
        $('[name=q2_2]').attr(props);
        $('[name=q2_3]').attr(props);
        $('[name=q2_4]').attr(props);
    } else {
        $('[name^=q2_]').attr('disabled', false);
    }
});

http://jsfiddle.net/8cjupnrg/

我宁愿不在我的项目中使用 jQuery，因为它被证明是有问题的。

这可以用纯JS实现吗？

由于我使用的是 Laravel，vue 组件可能是一个替代方案，但我对 VueJS 不太熟悉。

【问题讨论】：

可以“用纯JS实现”，到目前为止你有什么尝试？你在哪里卡住了？

标签： javascript jquery vue.js

【解决方案1】：

JQuery 是一个 JavaScript 库，因此您可以使用 JQuery 执行的所有操作也可以使用纯 JavaScript 完成。

这是用纯 JavaScript 编写代码的简单解决方案：

let none = document.querySelector('[name=q2_5]');
none.addEventListener("change", onChanged);

function onChanged() {
  if (none.checked === true) {
    document.querySelectorAll('[name^=q2_]:not([name=q2_5])').forEach(checkbox => {
      checkbox.checked = false;
      checkbox.disabled = true;
    })
  } else {
    document.querySelectorAll('[name^=q2_]').forEach(checkbox => {
        checkbox.disabled = false;
    });
  }
}

【讨论】：