禁用选择选择的选项

时间：2017-07-24 13:07:57

标签： javascript jquery

我试图让它只是选择禁用的一个我选择一个选项而不禁用所有选择的。

示例：在第一个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>

3 个答案:

答案 0 :(得分：3)

您可以将.filter() totarget <select>与selectedIndex属性一起使用，然后将其停用。

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

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

＆＃13;
＆＃13; 
$(function() {
  $('.asignar').on('click', function() {
    $(".widthSelect").filter(function() {
      return this.selectedIndex > 0;
    }).prop('disabled', true);
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我认为你的意思是：

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

答案 2 :(得分：0)

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

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