选择多个仅允许为特定选项选择一个

Question

如何使选项的某些部分可以选择多个或仅选择一个。下面是Html

<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3">
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple>

        //this 3 item can only be select only one, clear multiple selection if this any 3 item selected
        <option value="*" class="only_one">Every Weekdays</option>
        <option value="1,2,3,4,5" class="only_one">Monday - Friday</option>
        <option value="0,6" class="only_one">Weekends</option>

        //this 7 item can select multiple, clear above selection if selected
        <option value="1" title="Weekday: Monday" >Monday</option>
        <option value="2" title="Weekday: Tuesday" >Tuesday</option>
        <option value="3" title="Weekday: Wednesday" >Wednesday</option>
        <option value="4" title="Weekday: Thursday" >Thursday</option>
        <option value="5" title="Weekday: Friday" >Friday</option>
        <option value="6" title="Weekday: Saturday" >Saturday</option>
        <option value="0" title="Weekday: Sunday" >Sunday</option>
    </select>
</div>

有重复的帖子建议删除多个属性..这不是我的情况..前3（代码中的注释）只能选择一个，然后它将清除任何其他选择。其他7周一至周日可以多次选择..

Answer 1

您可以执行一些逻辑测试以查看上次点击的是only_one选项，然后取消选择其余选项，如果此处选择了非only_one选项，则取消选中所有only_one选项是一个小提琴https://jsfiddle.net/tvL3em2f/和相关的代码：

$('#cron_dow option').click(function(){
    if($(this).hasClass('only_one')) {
        $('#cron_dow').val($(this).val());
    }
    else {
      $('option.only_one').prop('selected',false);
    }
  })

Answer 2

这只在前3个选项中选择一个值，在最后7个选项中选择多个。试试这个： -

检查onchange的静态值，但它可以正常工作

 $("select[name='cron_dow']").change(function(){
       console.log($(this).val());     
       if($(this).val() == "1,2,3,4,5" || $(this).val() == "*" ||  $(this).val() == "0,6" ){
       //console.log("sjdhsj");
       	jQuery("#cron_dow").removeAttr("multiple");
       }
       else{
       //console.log('hello');
       	jQuery("#cron_dow").attr("multiple","multiple");
       }
    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3">
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple>

        //this 3 item can only be select only one, clear multiple selection if this any 3 item selected
        <option value="*" class="only_one">Every Weekdays</option>
        <option value="1,2,3,4,5" class="only_one">Monday - Friday</option>
        <option value="0,6" class="only_one">Weekends</option>

        //this 7 item can select multiple, clear above selection if selected
        <option value="1" title="Weekday: Monday" class="byy" >Monday</option>
        <option value="2" title="Weekday: Tuesday" class="byy" >Tuesday</option>
        <option value="3" title="Weekday: Wednesday" class="byy" >Wednesday</option>
        <option value="4" title="Weekday: Thursday" class="byy">Thursday</option>
        <option value="5" title="Weekday: Friday" class="byy">Friday</option>
        <option value="6" title="Weekday: Saturday" class="byy">Saturday</option>
        <option value="0" title="Weekday: Sunday" class="byy">Sunday</option>
       </select>
    </div>

Answer 3

如何将它们分成两个选择元素，第一个元素没有多重属性

＆＃13;

＆＃13;

   <select name="option1" required>
        <option value="*" class="only_one">Every Weekdays</option>
        <option value="1,2,3,4,5" class="only_one">Monday - Friday</option>
        <option value="0,6" class="only_one">Weekends</option>
    </select>    
    <select name="option2" required multiple>
        <option value="1" title="Weekday: Monday" >Monday</option>
        <option value="2" title="Weekday: Tuesday" >Tuesday</option>
        <option value="3" title="Weekday: Wednesday" >Wednesday</option>
        <option value="4" title="Weekday: Thursday" >Thursday</option>
        <option value="5" title="Weekday: Friday" >Friday</option>
        <option value="6" title="Weekday: Saturday" >Saturday</option>
        <option value="0" title="Weekday: Sunday" >Sunday</option>
    </select>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以将click事件处理程序附加到每个选项，因此请采取正确的操作：

$('#cron_dow option').on('click', function (e) {
    if ($(this).is('.only_one')) {
        //
        // no more than 1 only_one selected
        //
        if ($('#cron_dow option.only_one:selected').length > 1) {
            $(this).prop('selected', false);
        }
        //
        // deselect the remaining
        //
        $('#cron_dow option:not(.only_one):selected').prop('selected', false);
    } else {
        //
        // deselect all the only_one options
        //
        $('#cron_dow option.only_one:selected').prop('selected', false);
    }
})

select {
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="bootstrap-select active_select col-sm-12 col-md-3 col-lg-3">
    <select class="selectpicker" id="cron_dow" data-style="btn btn-success" name="cron_dow" required multiple size=10>

        //this 3 item can only be select only one, clear multiple selection if this any 3 item selected
        <option value="*" class="only_one">Every Weekdays</option>
        <option value="1,2,3,4,5" class="only_one">Monday - Friday</option>
        <option value="0,6" class="only_one">Weekends</option>

        //this 7 item can select multiple, clear above selection if selected
        <option value="1" title="Weekday: Monday">Monday</option>
        <option value="2" title="Weekday: Tuesday">Tuesday</option>
        <option value="3" title="Weekday: Wednesday">Wednesday</option>
        <option value="4" title="Weekday: Thursday">Thursday</option>
        <option value="5" title="Weekday: Friday">Friday</option>
        <option value="6" title="Weekday: Saturday">Saturday</option>
        <option value="0" title="Weekday: Sunday">Sunday</option>
    </select>
</div>

Answer 5

基于来自@noobcode和@ cumminUpp07的答案...我出自我自己的答案..和它的工作.. @ noobcode工作，如果我只使用纯选择..但我使用bootstrap-selectpicker ..什么要做的是..我刚从bootstrap-select触发了渲染选项.. :)谢谢伙计..

并且<select ..... multiple **size=7**>实际上也让它变得完美..

$("select[name='cron_dow']").change(function() {
    if ($(this).find('option:selected').hasClass('only_one')) {
        console.log("Up: " + $(this).val());
        jQuery("#cron_dow").removeAttr("multiple");
    } else {
        jQuery("#cron_dow").attr("multiple", "multiple");
        console.log("Down: " + $(this).val());
    }

    $('.cron_dow').selectpicker('render');

});