I'm trying to make it only put the select disabled which I choose an option and not put disabled all the select.
Example: in the first one I select
choose B Babel
only that select it gets disabled
$(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">Elejir</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">Elejir</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">Elejir</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">Elejir</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">Elejir</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">Elejir</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>
Your problem is that you directly block all elements with class "widthSelect".
When you iterate through all those elements, you have to check if they have any options selected. With what you do a function that looks at what index they have selected.
If the index (
selectedIndex
) is different from 0 (the "Choose" option, which by the way is written withg
) then block it.You disable all those
select
that have the class.withSelect
when clicking the button:Add a class to all the selected ones and then find and disable them: