Question

我想制作一个表格，如果物品有库存，那么库存输入将被启用，否则库存输入将被禁用。

我正在寻找bootstrap快捷方式。

到目前为止，这是我的代码。

<div class="form-group">
  <label>Is item stockable?</label>
  <select name="stockable" class="form-control">
    <option value="">Choose</option>
    <option value="0">No, Item is not stockable</option>
    <option value="1">Yes, Item is stockable</option>
  </select>
</div>

<div class="form-group">
  <label>Stok</label>
  <input class="form-control" placeholder="" name="stock" type="text" disabled>
</div>

如果没有引导快捷方式，我希望有简单易用的方法来处理jQuery。

Answer 1

使用更改事件，使用if

根据选择的值切换已禁用的属性

$('select[name="stockable"]').change(function(){
 if($(this).val() != 0) {
 $('input[name="stock"]').prop('disabled',false);
 } else {$('input[name="stock"]').prop('disabled',true);}
});

或：

＆＃13;

$(document).ready(function(){
 $('select[name="stockable"]').change(function(){
   $('input[name="stock"]').prop('disabled',this.value != 0 ?false:true);
 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Is item stockable?</label>
  <select name="stockable" class="form-control">
    <option value="">Choose</option>
    <option value="0">No, Item is not stockable</option>
    <option value="1">Yes, Item is stockable</option>
  </select>
</div>

<div class="form-group">
  <label>Stok</label>
  <input class="form-control" placeholder="" name="stock" type="text" disabled>
</div>

＆＃13;

注意：最好使用一些单选按钮，你的选择只有2个值

Answer 2

选择的更改事件请检查所选值是1然后启用库存输入字段否则禁用。

在这种情况下，当没有选择值或＆＃39; 0＆＃39;选择的值只有在＆＃39; 1＆＃39;时才会禁用输入字段。然后选择它才会被启用。

请查看以下代码段以便更好地理解。

＆＃13;

$(document).ready(function(){
  $("select[name='stockable']").on('change',function(){
    if($(this).val()==1){
      $("input[name='stock']").prop("disabled",false);
    }else{
      $("input[name='stock']").prop("disabled",true);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Is item stockable?</label>
  <select name="stockable" class="form-control">
    <option value="">Choose</option>
    <option value="0">No, Item is not stockable</option>
    <option value="1">Yes, Item is stockable</option>
  </select>
</div>

<div class="form-group">
  <label>Stok</label>
  <input class="form-control" placeholder="" name="stock" type="text" disabled>
</div>

＆＃13;

Bootstrap如何启用/禁用所选选项的输入？

2 个答案: