禁用已在另一個多選框中選中的選項

我已經看到此功能可以使用單個選擇框，但無法使用多個選擇框進行設置。禁用已在另一個多選框中選中的選項

比方說，我有兩個選擇多：

<select class='test' multiple> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 

<select class='test' multiple> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select>

如何管理，如果在任何選擇框選擇鎖定的選項奧迪？

我用努力：

$(document).on('change', function(e) { 
     e.preventDefault(); 
     $('.test').find('option').prop('disabled', false); 
     $('.test').each(function() { 
     $('.test').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 
     }); 
    });

來源

2016-07-27 dante

能否請您解釋一下這個問題有點多？我已經將你的代碼插入到jsFiddle中，並且它似乎將選定的選項鎖定在未選擇的列表上（據我的理解，這些是預期的結果）。 https://jsfiddle.net/6p7pshLp/ – Hodrobond

添加小提琴或片段。文件如何改變？ – Mojtaba

@Hodrobond That's it ..如果你選擇多個選項，它只會鎖定第一個選中的項目。 – dante

您需要保存的值，並將它傳遞給其他的選項。就像這樣：

$('.test').on('change', function() { 
    var selected = $(this).children(':selected').val(); 
    $('.test').val(selected); 
});

http://codepen.io/sandrina-p/pen/KrZRXj

編輯 - 我改變了它接受值

$('.test').on('change', function() { 
    var selected = $(this).val(); 
    $('.test').val(selected); 
});

編輯陣列 - 我建議使用checkboxs不是多個選擇。更友好，更直觀，更容易選擇/禁用不同的選項。（見codepen）

// 2 arguments: the first group of cars and the other group of cars 
function selectCar(carInputs, otherCarInputs) { 
    carInputs.each(function(){ 
    if ($(this).is(":checked")) { 
     // it is checked 
     var value = $(this).val(); 
     console.log('checked: '+ value); 

     //filter otherCarsInputs and disable the one that the user selected. 
     otherCarInputs.filter(function(){ 
      if(this.value === value) { 
       return true; 
      } 
     }).prop('disabled', 'disabled'); 

    } else { 
     var value = $(this).val(); 
     console.log('unchecked: '+ value); 

     //do the inverse. is the user uncheck the input, enable it on the other team 
     otherCarInputs.filter(function(){ 
      if ($(this).is(':disabled') && this.value == value) { 
       return true; 
      } 
     }).prop('disabled', ''); 
    } 
    }); 
} 

//on each input, calls the function with the right parameters (group car) 
$('input').on('change', function(){ 
    if ($(this).hasClass('car1')) { 
     selectCar($('.car1'), $('.car2')); 
    } else { 
     selectCar($('.car2'), $('.car1')); 
    } 
});

來源

2016-07-27 20:49:44

由於我無法選擇多個選項，因此無法工作。 – dante

好的，再檢查一次，現在應該可以工作。要選擇多個值，您需要按Ctrl鍵。（cmd的mac） –

這就是它..你明白了！非常感謝 – dante

你可以做其他的方式

$('.test option').click(function(){ 
    var op = $(this).attr('value'); 
    // commented out for multiple select ability 
    //$('.test option').attr('disabled', null); 
    $('.test option[value='+op+']').not(':selected').attr('disabled', $(this).filter(':selected').length > 0 ? true : null); 
});

來源

2016-07-27 22:29:09

當我選擇多個值時，這不起作用。 – dante

是啊，我錯了）我編輯了答案。 –

對，但現在如果我選擇多個值，它只會禁用其中的一個。 – dante

禁用已在另一個多選框中選中的選項

回答

相關問題