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

尝试使用prop而不是removeAttr函数，类似这样的

@Override
public void start(Stage primaryStage) {
    Pane root = new Pane();
    Arrow arrow = new Arrow();
    root.getChildren().add(arrow);

    root.setOnMouseClicked(evt -> {
        switch (evt.getButton()) {
            case PRIMARY:
                // set pos of end with arrow head
                arrow.setEndX(evt.getX());
                arrow.setEndY(evt.getY());
                break;
            case SECONDARY:
                // set pos of end without arrow head
                arrow.setStartX(evt.getX());
                arrow.setStartY(evt.getY());
                break;
        }
    });

    Scene scene = new Scene(root, 400, 400);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 2

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

如果$("#minus-btn").prop('disabled', true);

，则需要添加启用代码selected != ''

示例代码段：

＆＃13;

$(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);

    }

  })

});

＆＃13;

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

＆＃13;

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

2 个答案: