禁用其他选择if值是否等于1

时间:2017-06-07 19:45:21

标签: jquery

我有动态选择选项。只有0和1个用户可以选择。

如果用户选择值= 1,我想禁用其他选择&保持现状。

如果用户从当前选项中选择值= 0,则其他选择再次启用。

HTML

A : 
<select name="quantity[1]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
B : 
<select name="quantity[2]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
C:
<select name="quantity[3]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

的jQuery

$(document).on('change keyup keypress', '.trigger', function() {
  $(".quantity").prop("disabled", true);

  $('.quantity option:selected').each(function() {
    quantity += parseInt($(this).val()) || 0;
    if (quantity == 1) {
      $(this).prop("disabled", false);
    } else {
      $(this).prop("disabled", true);
    }
  });
});

https://jsfiddle.net/qq1q6orw/2/

3 个答案:

答案 0 :(得分:2)

以下是一个示例示例:

&#13;
&#13;
$(document).on('change keyup keypress', '.trigger', function() {
  var flag = $(this).val() == 1;
  $(".quantity").not(this).prop("disabled", flag);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
A :
<select name="quantity[1]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select> B :
<select name="quantity[2]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select> C:
<select name="quantity[3]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您发布的代码中有许多不必要的选择器和不必要的逻辑。您只需告诉jQuery不要使用.not()

禁用活动选择

$(document).on('change keyup keypress', '.trigger', function() {

  var quantity = $(this).val();
  if (quantity == 1) {
    $('.quantity').not(this).prop("disabled", true);
  } else {
    $('.quantity').not(this).prop("disabled", false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
A :
<select name="quantity[1]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
B :
<select name="quantity[2]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
C:
<select name="quantity[3]" class="form-control quantity trigger">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

答案 2 :(得分:0)

这里更新了小提琴:

https://jsfiddle.net/8sbk4dgo/1/

$(document).on('change keyup keypress', '.trigger', function() {
    if($(this).val() == 1){
      $(".quantity").not(this).prop("disabled", true);
    }else{
    $(".quantity").prop("disabled", false);    
    }     

    $('.quantity option:selected').each(function() {
        var quantity = parseInt($(this).val());
        if (quantity == 1) {
            $(this).prop("disabled", false);
        } else {
            $(this).prop("disabled", true);
        }
    });
});