当用户在选择器中选择一个类别时启用按钮

Question

我想在用户在选择器中选择一个选项时启用按钮。我已经设置了一个值为“”的隐藏选项。这是我的脚本：

$(document).ready(function() { 
    $("#minus-btn").attr('disabled','disabled'); 

$('#pref-list').change(function() { 
    var selected = $(this).val(); 
    if(selected != ''){ 
    $('#pref-text').removeClass('hidden'); 
    $('#pref-list-d').removeClass('col-xs-2'); 
    $('#pref-list-d').addClass('col-xs-1'); 
    $('#pref-list-p').addClass('col-xs-1'); 

    } else { 
     $("#minus-btn").removeAttr('disabled','disabled'); 

    } 

    }) 

}); 

这是我的html：

div class="container-fluid"> 

    <form method="POST" class="form-group"> 
     <div class="row"> 

     <div class="col-xs-1 col-xs-offset-3" id="pref-list-m"> 
     <button id="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true"></i></button> 
     </div> 

     <div class="col-xs-1" id="pref-list-p"> 
     <button id="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i></button> 
     </div> 

     <div class="col-xs-2" id="pref-list-d"> 
     <select class="btn-sm custom" id="pref-list" name="preferences"> 
      <option value="" hidden> Elige </option> 
      <option value="deportes">Deportes</option> 
      <option value="peliculas">Peliculas</option> 
      <option value="carros">Carros</option> 
      <option value="Libros">Libros</option> 
      <option value="Colores">Colores</option> 
     </select> 
     </div> 

     <div class="col-xs-2" id="pref-text-d"> 
       <input type="text" class="hidden form-control pull-left" placeholder=" item1,item2,item3" id="pref-text"> 
     </div> 

     </div> 
     <br> 
     <div class="row"> 
     <input type="submit" class="btn btn-default btn-default0" id="nextstep" value="Siguiente"> 
     </div> 
</div> 

它不启用该按钮，当我试图删除该属性。请帮我解决这个问题。

谢谢。

Answer 1

至于Anirudha要求用$("#minus-btn").prop('disabled', true);，它正在与它。

需要补充使代码$("#minus-btn").prop('disabled', true);，如果selected != ''

示例代码段：

$(document).ready(function() { 
 
    $("#minus-btn").prop('disabled', true); 
 

 
    $('#pref-list').change(function() { 
 
    var selected = $(this).val(); 
 
    if (selected != '') { 
 
     $('#pref-text').removeClass('hidden'); 
 
     $('#pref-list-d').removeClass('col-xs-2'); 
 
     $('#pref-list-d').addClass('col-xs-1'); 
 
     $('#pref-list-p').addClass('col-xs-1'); 
 
     $("#minus-btn").prop('disabled', false); //update/add this line 
 

 
    } else { 
 
     $("#minus-btn").prop('disabled', true); 
 

 
    } 
 

 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 

 
    <form method="POST" class="form-group"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-1 col-xs-offset-3" id="pref-list-m"> 
 
     <button id="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true">This sbutton</i> 
 
     </button> 
 
     </div> 
 

 
     <div class="col-xs-1" id="pref-list-p"> 
 
     <button id="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i> 
 
     </button> 
 
     </div> 
 

 
     <div class="col-xs-2" id="pref-list-d"> 
 
     <select class="btn-sm custom" id="pref-list" name="preferences"> 
 
      <option value="" hidden>Elige</option> 
 
      <option value="deportes">Deportes</option> 
 
      <option value="peliculas">Peliculas</option> 
 
      <option value="carros">Carros</option> 
 
      <option value="Libros">Libros</option> 
 
      <option value="Colores">Colores</option> 
 
     </select> 
 
     </div> 
 

 
     <div class="col-xs-2" id="pref-text-d"> 
 
     <input type="text" class="hidden form-control pull-left" placeholder=" item1,item2,item3" id="pref-text"> 
 
     </div> 
 

 
    </div> 
 
    <br> 
 
    <div class="row"> 
 
     <input type="submit" class="btn btn-default btn-default0" id="nextstep" value="Siguiente"> 
 
    </div> 
 
</div>

Answer 2

尝试道具使用，而不是removeAttr功能，这样的事情

else { 
     $("#minus-btn").prop('disabled',true); 
    }