带有 jquery 和引导多选的三态复选框

Tri state checkboxes with jquery and bootstrap multiselect

本文关键字:复选框 jquery 带有      更新时间:2023-09-26

我正在使用jquery引导多选 http://davidstutz.github.io/bootstrap-multiselect/。我对插件非常满意,直到一个棘手的要求出现。我的多选类似于如下

        <select id="example4" multiple="multiple" style="display: none;">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
        </select>

我的要求是我收到一个用户列表,其中每个用户都有首选项。 例如:用户 1 喜欢奶酪和西红柿,用户 2 喜欢西红柿、蘑菇和洋葱。 因此,单击下拉列表时应预先选择所有四个选项。应选中西红柿选项,并在中间状态下检查其他选项。我需要这样的东西 http://css-tricks.com/indeterminate-checkboxes/(顺便说一下,效果很棒(。我尝试通过 javascript 通过编写来操作复选框

             //leaving out the unnecessary code
              cb = $("#multiselectObj").find('input[value="'+objValue+'"]');
              $(cb).prop("indeterminate", true);

但是上面的代码似乎没有任何效果。我甚至可以在选择选项中有任何三态吗?有没有办法解决这个问题,或者我应该使用完全不同的插件?非常感谢专家的任何帮助。

(通过问题中的编辑回答。转换为社区维基答案。请参阅没有答案的问题,但问题在评论中得到解决(或在聊天中扩展( (

OP写道:

找到解决方案:我从当前的多选 obj 中获取了下一个div 并获得了复选框。它有效。

       function findDropdownCheckbox(ele, chkValue){
              divs = $(ele).next();
              cb = $(divs).find('input[value="'+chkValue+'"]');
              //console.log("divvvvvvvvvsss -");
              //console.log(cb);
              return cb;
       }