1

Estoy tratando de hacer que solo me ponga el select disabled el el cual yo le escoga una opcion y no me ponga disabled todos los select.

Ejemplo: en el primer select escojo B Babel solamente ese select se me pone 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>

0

2 respuestas 2

3

Tu problema es que directamente bloqueas todos los elementos con clase "widthSelect".

Cuando iteras por todos aquellos elementos, has de comprobar si tienen alguna opcion seleccionada. Con lo que haces una función que mire qué indice tienen seleccionado.

Si el indice (selectedIndex) es distinto de 0 (la opción "Elejir", que por cierto se escribe con g) entonces que se bloquee.

$(function() {
  $('.asignar').on('click', function() {
    $(".widthSelect").each(function() {
      //console.log($(this).prop('selectedIndex'));
      if ($(this).prop('selectedIndex') != 0)
        $(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">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>

0
2

Deshabilitas todos los select que tienen la clase .withSelect al momento de dar clic al boton:

$(".widthSelect").attr('disabled','disabled');

Agrega una clase a todos los seleccionados y despues buscalos y deshabilitalos:

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


$(".widthSelect").change(function(){
  if(this.selectedIndex == 0)
    $(this).removeClass("selected");
   else
    $(this).addClass("selected");
});
.selected{
border:solid 1px blue;
};
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.