Select disabled

Question

Select disabled

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I'm trying to make only the select disabled switch on which I choose an option and do not set all the select disabled.

Example: in the first select I choose B Babel only that select is set 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>

javascript jquery

asked by Eduard 24.07.2017 в 14:53

source

2 answers

2

You disable all select that have the class .withSelect at the moment of clicking the button:

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

Add a class to all the selected ones and then search and disable them:

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

answered by 24.07.2017 в 15:33

Input only receive up to 8000 can a primary key be modified in mysql?

score 3 · Accepted Answer

Your problem is that you directly block all the elements with class "widthSelect".

When you iterate through all those elements, you have to check if they have any option selected. With what you do, a function that looks at what index they have selected.

If the index ( selectedIndex ) is different from 0 (the option "Elejir", which by the way is written with g ) then it will be blocked.

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