禁用选择选中哪个选项

Question

我试图使它只是将选择禁用的一项放到我选择的选项中，而不是禁用所有选择的一项。

示例：在第一个select选择B Babel仅该选择被禁用

 $(function() { $('.asignar').on('click', function() { $(".widthSelect").attr('disabled', 'disabled'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row center span10"> <button type="button" class='asignar'>assign</button> <table id="example-table" class="table table-striped table-hover table-condensed"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>SELECT</th> </tr> <tbody> <tr> <td>Ford</td> <td>Escort</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Ranger</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Tacoma</td> <td>Red</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Mustang</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Mercury</td> <td>Sable</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Corolla</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> </tbody> </table> </div> 

Answer 1

您可以使用.filter()通过selectedIndex属性将<select>为目标，然后将其禁用。

$(".widthSelect").filter(function() {
  return this.selectedIndex > 0;
}).prop('disabled', true);

并操纵属性，即disabled使用.prop()方法代替.attr()

 $(function() { $('.asignar').on('click', function() { $(".widthSelect").filter(function() { return this.selectedIndex > 0; }).prop('disabled', true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row center span10"> <button type="button" class='asignar'>assign</button> <table id="example-table" class="table table-striped table-hover table-condensed"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>SELECT</th> </tr> <tbody> <tr> <td>Ford</td> <td>Escort</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Ranger</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Tacoma</td> <td>Red</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Mustang</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Mercury</td> <td>Sable</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Corolla</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> </tbody> </table> </div> 

Answer 2

我想你的意思是：

 $(function(){ $('.asignar').on('click', function(){ $(".widthSelect").each( function(){ if( $(this).find(":selected").text() != "select..." ){ $(this).attr('disabled','disabled'); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row center span10"> <button type="button" class='asignar'>assign</button> <table id="example-table" class="table table-striped table-hover table-condensed"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>SELECT</th> </tr> <tbody> <tr> <td>Ford</td> <td>Escort</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Ranger</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Tacoma</td> <td>Red</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Ford</td> <td>Mustang</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Mercury</td> <td>Sable</td> <td>Silver</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> <tr> <td>Toyota</td> <td>Corolla</td> <td>Blue</td> <td id="ISINcb" class="lblCell_R" align="center"> <select class="widthSelect"> <option id="ISIN1">select...</option> <option id="ISIN2">B Babel</option> <option id="ISIN3">C Cable</option> <option id="ISIN4">E Enable</option> </select> </td> </tr> </tbody> </table> </div> 

Answer 3

我认为这个脚本会得到理想的结果

 $(function(){
      $('.asignar').on('click', function(){
       $("#example-table select").each(function(){
       if($(this).val()!='select...')
       $(this).attr('disabled','disabled');
       })
    });
    });