JQuery - 對同一個對象執行操作以防止覆蓋

Question

我有2個表單選擇。 我會檢查更改的選擇值，如果值是2我想禁用相同的div。

HTML

<select id="foo"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

<select id="bar"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

JS

$('select#foo').change(function() 
{ 
var eck = $('select#foo option:selected').prop('value'); 

    if (eck == '2') 
    { 
     $('#div').prop('disabled', true); 
    } 
    else 
    { 
     $('#div').prop('disabled', false); 
    } 
}); 

$('select#bar').change(function() 
{ 
var eck = $('select#bar option:selected').prop('value'); 

    if (eck == '2') 
    { 
     $('#div').prop('disabled', true); 
    } 
    else 
    { 
     $('#div').prop('disabled', false); 
    } 
}); 

我的問題是，以這種方式對每一個變化事件選擇這樣的過寫道以前。 我該怎麼處理？謝謝

Answer 1

我認爲你要找的是，如果在select元素中選擇了option[value=2]，那麼禁用元件ID爲div。所以

var $selects = $('#foo, #bar').change(function() { 
 
    $('#div').prop('disabled', $selects.find('[value="2"]').is(':selected')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="foo"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<select id="bar"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<button id="div">div</button>