Question

我在这里遇到一个奇怪的问题...我的页面上每组最多有十个复选框，它们通过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呈现多个带有多个复选框的民意调查我没有找到更好的方法。无论如何，它没有做任何事情，我仍然可以检查它们。有趣的是，如果我使用禁用的道具，它可以正常工作。我不确定，但我认为这可能是Materialise的一个问题。我也尝试使用removeAttr（）和trigger（）来更新元素，但是这并没有做到......

提前感谢您的帮助。

检查jQuery prop对Materialize的复选框没有影响

0 个答案: