Question

我需要在组内只选择一个选项。我使用了multiple-select.js

我应该可以点击

A1或A2或A3

和

B1或B2或B3

我也尝试过 - 认为只要所有按钮都具有相同的名称但是徒劳无功，它可以取消选择以前的按钮。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
      
          <link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
        
        
    </head>
    <body>
        <select multiple="multiple">
            <optgroup label="Group A">
                <option value="1">Radio A1</option>
                <option value="2">Radio A2</option>
                <option value="3">Radio A3</option>            
            </optgroup>
            <optgroup label="Group B">
                <option value="4">Radio B1</option>
                <option value="5">Radio B2</option>
                <option value="6">Radio B3</option>   
            </optgroup>
        </select>
        <script>
            $('select').multipleSelect(
            {
                multiple: true,
                multipleWidth: 300,
            selectAll: false,
                width: '100%',
                
                onClick: function(view) {
                    //;
                }            
            }
            
            );
        </script>
    </body>

Answer 1

通常情况下，多选插件不支持您所需的行为，您只能在单个选择中的每个选项组中选择一个选项。但是，您可以在没有选择组的情况下在单个选择中仅选择一个选项。

所以你可以使用2＆＃34;单行＆＃34;选择完成您想要的功能。

PS：我尝试自定义多选行为，使您只能在一个optgroup中选择一个单选按钮，但该插件不够灵活。

＆＃13;

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>

<body>
    <fieldset>
        <legend>Choose Group A and B</legend>
        <label>Group A</label>
        <select multiple="multiple">
            <option value="1">Radio A1</option>
            <option value="2">Radio A2</option>
            <option value="3">Radio A3</option>
        </select>

        <label>Group B</label>
        <select multiple="multiple">
            <option value="4">Radio B1</option>
            <option value="5">Radio B2</option>
            <option value="6">Radio B3</option>
        </select>
    </fieldset>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
    <script>
        $('select').multipleSelect({
            multiple: true,
            multipleWidth: 300,
            selectAll: false,
            width: '100%',
            single: true,
            onClick: function (view) {
                /*
                view.label: the text of the checkbox item
                view.checked: the checked of the checkbox item
                */
                //Uncheck other checkboxes in the group
            },
            onOptgroupClick: function (view) {
                /*
                view.label: the text of the optgroup
                view.checked: the checked of the optgroup
                view.children: an array of the checkboxes (DOM elements) inside the optgroup
                */
            }
        });
    </script>
</body>

</html>

＆＃13;

希望它可以帮到你。

为了表单中的空格，请使用bootstrap内联形式：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Multiple select to function like radio in a group</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>

    </style>
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <fieldset>
                <legend>Choose Group A and B</legend>
                <label>Group A </label>
                <select class="form-control">
                    <option value="1">Radio A1</option>
                    <option value="2">Radio A2</option>
                    <option value="3">Radio A3</option>
                </select>

                <label>Group B </label>
                <select class="form-control">
                    <option value="4">Radio B1</option>
                    <option value="5">Radio B2</option>
                    <option value="6">Radio B3</option>
                </select>
            </fieldset>

        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

多个选择功能，如组

1 个答案: