禁用/启用选择

时间：2015-09-06 17:24:09

标签： jquery html

我有两个ul列表，每个列表中有两个选择框。我需要先禁用第一个选择框并启用第二个选择框。选择第一个选项时，应禁用第二个选择，否则启用。第二个列表也是如此。 这是我的HTML：

<ul>
  <li>
    <div class="select-country">
      <select class="units" id="country">
        <option value="Metres">Metres</option>
        <optgroup label="Evropa">
          <option value="Feet">Feet</option>
          <option value="Fathoms">Fathoms</option>
        </optgroup>
        <optgroup label="Afrika">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Azija">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Severna Amerika">
          <option value="Feet">Feet</option>
        </optgroup>
      </select>
    </div>
  </li>
  <li style="visibility: visible;">
    <label>Destinacija:</label>
    <div class="select-country">
      <select class="units" id="destination">
        <option value="Metres">Metres</option>
        <option value="Feet">Feet</option>
        <option value="Fathoms">Fathoms</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
      </select>
    </div>
  </li>
</ul>

这是脚本：

$(document).ready(function() {
  $('#destination').prop('disabled','disabled').css('opacity','0.5');        
  $('#country').on('change',function(){
    var  choice = $(this).val();
    if(choice == "Metres"){                           
      console.log($('#destination').prop('disabled','disabled').css('opacity','0.5'));
    }else{
      $('#destination').prop('disabled',false).css('opacity','1');
    }
  });
});

该代码适用于两个选择框，但我想要一个适用于这两个列表的脚本...我在这个问题中只放了一个列表，但第二个是相同的。

1 个答案:

答案 0 :(得分：3)

提供一个公共课并在那里使用this：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.desti-select').prop('disabled','disabled').css('opacity','0.5');        
  $('.country-select').on('change',function(){
    var choice = $(this).val();
    if(choice == "Metres"){                           
      $(this).closest("ul").find('.desti-select').prop('disabled','disabled').css('opacity','0.5');
    }else{
      $(this).closest("ul").find('.desti-select').prop('disabled',false).css('opacity','1');
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="select-country">
      <select class="units country-select" id="country-1">
        <option value="Metres">Metres</option>
        <optgroup label="Evropa">
          <option value="Feet">Feet</option>
          <option value="Fathoms">Fathoms</option>
        </optgroup>
        <optgroup label="Afrika">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Azija">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Severna Amerika">
          <option value="Feet">Feet</option>
        </optgroup>
      </select>
    </div>
  </li>
  <li style="visibility: visible;">
    <label>Destinacija:</label>
    <div class="select-country">
      <select class="units desti-select" id="destination-1">
        <option value="Metres">Metres</option>
        <option value="Feet">Feet</option>
        <option value="Fathoms">Fathoms</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
      </select>
    </div>
  </li>
</ul>
<ul>
  <li>
    <div class="select-country">
      <select class="units country-select" id="country-2">
        <option value="Metres">Metres</option>
        <optgroup label="Evropa">
          <option value="Feet">Feet</option>
          <option value="Fathoms">Fathoms</option>
        </optgroup>
        <optgroup label="Afrika">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Azija">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Severna Amerika">
          <option value="Feet">Feet</option>
        </optgroup>
      </select>
    </div>
  </li>
  <li style="visibility: visible;">
    <label>Destinacija:</label>
    <div class="select-country">
      <select class="units desti-select" id="destination-2">
        <option value="Metres">Metres</option>
        <option value="Feet">Feet</option>
        <option value="Fathoms">Fathoms</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
      </select>
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

或者，您也可以使用HTML5 data-*属性来执行此操作。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.desti-select').prop('disabled','disabled').css('opacity','0.5');        
  $('.country-select').on('change',function(){
    var choice = $(this).val();
    if(choice == "Metres"){                           
      $($(this).data('desti')).prop('disabled','disabled').css('opacity','0.5');
    }else{
      $($(this).data('desti')).prop('disabled',false).css('opacity','1');
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="select-country">
      <select class="units country-select" id="country-1" data-desti="#destination-1">
        <option value="Metres">Metres</option>
        <optgroup label="Evropa">
          <option value="Feet">Feet</option>
          <option value="Fathoms">Fathoms</option>
        </optgroup>
        <optgroup label="Afrika">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Azija">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Severna Amerika">
          <option value="Feet">Feet</option>
        </optgroup>
      </select>
    </div>
  </li>
  <li style="visibility: visible;">
    <label>Destinacija:</label>
    <div class="select-country">
      <select class="units desti-select" id="destination-1">
        <option value="Metres">Metres</option>
        <option value="Feet">Feet</option>
        <option value="Fathoms">Fathoms</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
      </select>
    </div>
  </li>
</ul>
<ul>
  <li>
    <div class="select-country">
      <select class="units country-select" id="country-2" data-desti="#destination-2">
        <option value="Metres">Metres</option>
        <optgroup label="Evropa">
          <option value="Feet">Feet</option>
          <option value="Fathoms">Fathoms</option>
        </optgroup>
        <optgroup label="Afrika">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Azija">
          <option value="Feet">Feet</option>
        </optgroup>
        <optgroup label="Severna Amerika">
          <option value="Feet">Feet</option>
        </optgroup>
      </select>
    </div>
  </li>
  <li style="visibility: visible;">
    <label>Destinacija:</label>
    <div class="select-country">
      <select class="units desti-select" id="destination-2">
        <option value="Metres">Metres</option>
        <option value="Feet">Feet</option>
        <option value="Fathoms">Fathoms</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
        <option value="Feet">Feet</option>
      </select>
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题