选中的 jQuery 属性对 Materialize 的复选框没有影响

Posted 2023-02-22

【中文标题】选中的 jQuery 属性对 Materialize 的复选框没有影响

【英文标题】：jQuery prop checked has no effect on Materialize's checkboxes

【发布时间】：2018-08-10 16:28:21

【问题描述】：

我在这里遇到了一个奇怪的问题...我的页面上每个组最多有十个复选框，这些复选框通过 vue v-for 循环呈现。它们用于可以但不必支持多选的民意调查。在这种情况下，我试图防止多选。所以这是复选框的 html：

<div class="left-align">
  <p v-for="answer in polls[index+n].answers">
    <input type="checkbox" class="filled-in" 
      :name="'group'+n" 
      :id="answer._id" 
      :value="answer" 
       @change="lockBoxes(n, answer._id)" 
       v-model="selected_answers"/>
    <label :for="answer._id">answer.answer</label>
  </p>
</div>

冒号只是告诉属性正在被绑定。因此，我的页面上目前有 5 个投票，这意味着 5 组复选框，其中每个复选框在组中都有一个定义的名称。在这种情况下，上面的代码将被渲染到 DOM 中：

<div class="left-align">
  <p>
    <input name="group0" id="5a95784b23fc2e03cc34aba3" class="filled-in" value="[object Object]" type="checkbox"> 
    <label for="5a95784b23fc2e03cc34aba3">A</label>
  </p>
  <p>
    <input name="group0" id="5a95784b23fc2e03cc34aba2" class="filled-in" value="[object Object]" type="checkbox"> 
    <label for="5a95784b23fc2e03cc34aba2">B</label>
  </p>
  <p>
    <input name="group0" id="5a95784b23fc2e03cc34aba1" class="filled-in" value="[object Object]" type="checkbox"> 
    <label for="5a95784b23fc2e03cc34aba1">C</label>
  </p>
</div>

不用担心值字段。那不应该被渲染，但我在我的 vue 组件中需要它，我还没有找到不渲染它的方法。无论如何，我使用 jQuery 来选择组中的所有其他复选框：

lockBoxes: function(group, selected) 
  $(":input[name^="+'group'+group+"]:not(#"+selected+")").each( function () 
    $(this).prop('checked', false);
  )

一旦选中一个组的一个复选框，就会触发此操作（请参阅复选框中的@change）。我已经记录了元素并且它得到了正确的元素。此代码获取除组中当前选定的复选框之外的任何其他复选框，并且应该取消选中其他复选框。可能有更好或更有效的解决方案，但是看到 vue 使用多个复选框呈现多个民意调查，我没有找到更好的方法。无论如何，它什么也没做，我仍然可以检查它们。有趣的是，如果我改用 disabled 道具，它可以正常工作。我不确定，但我认为这可能是 Materialise 的问题。我还尝试使用 removeAttr() 和 trigger() 来更新元素，但这也没有成功...

提前感谢您的帮助。

【参考方案1】：

所以我一直在尝试使用 jQuery 找到解决方案，但正如 @Jacob Goh 已经说过的，vue 和 jQuery 不能很好地协同工作。但是，我通过使用两者来解决这个问题。它不漂亮，但运行良好：

lockBoxes: function(group, selected) 
  let self = this;
  $(":input[name^="+'group'+group+"]:not(#"+selected+")").each( function () 
    let index = self.selected_answers.indexOf($(this).attr('id'));
    if (index > -1) self.selected_answers.splice(index, 1);
  )

所以我仍然使用 jQuery 来查找组中除选定的复选框之外的所有其他复选框，并使用 splice 将它们从数组中取出。并且我将值绑定更改为答案对象的 id，所以只有 id 会进入数组。