禁用选择选中哪个选项

Question

I am trying to make it just put the select disabled one which I choose an option and do not disable all the select ones.

Example: in the first select selection B Babel Only that select gets disabled me

 $(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

You can use .filter() totarget <select> with selectedIndex property, and then disable them.

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

And to manipulate properties ie disabled use .prop() method instead of .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

I think you mean this:

 $(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

I think this script will get desired result

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