如果選擇1st或2nr，則禁用第3個，第4個下拉列表

Question

我有這個問題：在我的表單中有4個下拉列表，當選擇1st（category1）或2nd（software1）下拉列表時，第3個（category2）和第4（軟件2）必須禁用。

對於這個問題，我覺得在這disable-second-dropdown-if-the-first-is-not-selected腳本，但我不相信修改此：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
category1 
<select name='cat1'> 
    <option value='0'>Select one</option> 
    <option value='1'>little</option> 
    <option value='2'>good</option> 
</select> 

software1 
<select name='soft1'> 
    <option value=''>Select one</option> 
    <option value='W'>Word</option> 
    <option value='E'>Excel</option> 
    <option value='PP'>Power Point</option> 
</select> 

<br /> 
category2 
<select name='cat2'> 
    <option value='0'>Select one</option> 
    <option value='1'>little</option> 
    <option value='2'>good</option> 
</select> 

software2 
<select name='soft2'> 
    <option value=''>Select one</option> 
    <option value='W'>Word</option> 
    <option value='E'>Excel</option> 
    <option value='PP'>Power Point</option> 
</select> 

<script type="text/javascript"> 
var setEnabled = function(e) { 
    var name = this.name.replace(/1/, '2'); //get name for second drop down 
    $('select[name=' + name + ']') 
     .prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one 
}; 

$(function() { 
    $('select[name=cat1], select[name=soft1]') 
     .on('change', setEnabled) 
     .trigger('change'); // trigger on page load 
}); 
</script> 

如何修改呢？

感謝

Answer 1

我想你想最主要的是翻轉===爲!==

然而，爲了得到這個工作的一個矩陣，其中兩個頂部輸入觸發啓用/的兩個端輸入禁止，您將需要測試兩者的變化。

var setEnabled = function(e) { 
 
    var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0; 
 
    $('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one 
 
    if (selected) { 
 
    $('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0) 
 
    } 
 
}; 
 

 
$(function() { 
 
    $('select[name=cat1], select[name=soft1]') 
 
     .on('change', setEnabled) 
 
     .trigger('change'); // trigger on page load 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
</script> 
 
category1 
 
<select name='cat1'> 
 
    <option value='0'>Select one</option> 
 
    <option value='1'>little</option> 
 
    <option value='2'>good</option> 
 
</select> 
 

 
software1 
 
<select name='soft1'> 
 
    <option value=''>Select one</option> 
 
    <option value='W'>Word</option> 
 
    <option value='E'>Excel</option> 
 
    <option value='PP'>Power Point</option> 
 
</select> 
 

 
<br /> 
 
category2 
 
<select name='cat2'> 
 
    <option value='0'>Select one</option> 
 
    <option value='1'>little</option> 
 
    <option value='2'>good</option> 
 
</select> 
 

 
software2 
 
<select name='soft2'> 
 
    <option value=''>Select one</option> 
 
    <option value='W'>Word</option> 
 
    <option value='E'>Excel</option> 
 
    <option value='PP'>Power Point</option> 
 
</select>