0

当我选中复选框时，我想启用多项选择，但它不起作用。如何使用 jQuery mobile 实现这一点？ 

<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
 </select>

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").attr('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").attr('multiple',false);
        }
    });
});
4

3 回答 3

0

尝试这个 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
  </style>
</head>
<body>

  <input type="checkbox" id="toggle"> Toggle Select
   <select name="targets" id="targets">
         <option value="0">-----Select a option ----</option>
         <option value="1">option 1</option>
         <option value="2">option 2</option>
         <option value="3">option 3</option>
   </select>

  <script>
  $(document).ready(function(){

       $("#toggle").on('click',function(){
        if($(this).is(':checked')==true){ 
         $("#targets").attr('multiple',true).attr("data-native-menu","false");
        }else{
         $("#targets").attr('multiple',false);
        }
      });

  });
  </script>

</body>
</html>
于 2015-06-18T04:03:30.493 回答
0

您正在使用attr()适用于简单 HTML 属性的函数。
但是，在较新版本的 jQuery（1.6 之后）中，对于 , 等元素属性，readonly您需要使用 jQuery函数。checkedmultipleprop()

尝试更改功能：

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").prop('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").prop('multiple',false);
        }
    });
});

jQuery.prop() 您可以在此处阅读更多信息。

这是我的JS Fiddle 演示，它有效。

于 2015-06-18T04:32:45.907 回答
0

从标记中的 data-native-menu="false" 开始：

<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

然后在复选框更改事件上，销毁 selectmenu 小部件，更新 multiple prop，并重新初始化它：

$("#toggle").on('change', function () {
    $("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});

演示

如果您想要单选的本机菜单，请将代码更改为：

$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({  nativeMenu: !$(this).is(':checked')});

演示

于 2015-06-18T13:05:36.713 回答