Question

我正在制作菜单，我希望其中的选项是互斥的。例如，如果他们选择低重要性，那么高重要性不应该是一个选项，如果他们选择低紧急度，那么高紧急度也不应该是一个选项。如何使用jQuery实现这一目标？

 <label>Select the priority level of the task:&nbsp;</label>
 <select id="taskPriority" name="priority[]" multiple="multiple">
      <option value="lowImp">Low Importance</option>
      <option value="highImp">High Importance</option>
      <option value="lowUrg">Low Urgency</option>
      <option value="highUrg">High Urgency</option>
 </select>

Answer 1

我做了一些检查选择更改的内容：http://jsfiddle.net/ckyBj/1/

这可能是我编写过的最丑陋的代码，但它确实有效。你可以把它变得更紧凑。

$(document).ready(function () {
    $('#taskPriority').on('change', function () {
        var theval = $(this).val();
        console.log(theval);
        if (jQuery.inArray('lowImp',theval) > -1) {
            $('#taskPriority').find('option[value=highImp]').prop('disabled', true);
        } 
        if (jQuery.inArray('highImp',theval) > -1) {
            $('#taskPriority').find('option[value=lowImp]').prop('disabled', true);
        }
        if (jQuery.inArray('lowUrg',theval) > -1) {
            $('#taskPriority').find('option[value=highUrg]').prop('disabled', true);
        }
        if (jQuery.inArray('highUrg',theval) > -1) {
            $('#taskPriority').find('option[value=lowUrg]').prop('disabled', true);
        }
        if(jQuery.inArray('lowImp',theval) == -1){
              $('#taskPriority').find('option[value=highImp]').prop('disabled',false);
        }
        if(jQuery.inArray('highImp',theval) == -1){
              $('#taskPriority').find('option[value=lowImp]').prop('disabled',false);
        }
        if(jQuery.inArray('lowUrg',theval) == -1){
              $('#taskPriority').find('option[value=highUrg]').prop('disabled',false);
        }
        if(jQuery.inArray('highUrg',theval) == -1){
              $('#taskPriority').find('option[value=lowUrg]').prop('disabled',false);
        }
    });
});

jQuery - 从菜单中禁用或删除选项

1 个答案: