Question

我正在努力实现一些非常简单的事情，但我无法弄明白。我想在单击按钮时禁用输入字段，然后在再次单击该按钮时重新启用它。

我肯定会让这个过于困难（JS新手）。

我目前的代码位于此 FIDDLE 。

感谢任何帮助。我想做错的解释也很好，因为我想学习：）

$(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
    if ($("#ip").val() != 'N/A') {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>

Answer 1

<强> Working fiddle

你要添加大括号{} arround else语句代码或只是第一行$("#ip").val(toggleText);将被视为其他代码：

$(document).ready(function() {
    var toggleText = $("#ip").val();

    $("#ipclear").click(function() {

        if ($("#ip").val() != 'N/A') {
            toggleText = $("#ip").val();

            $("#ip").val('N/A');
            $("#ip").prop("disabled", true);
            $(this).removeClass('btn-default').addClass('btn-warning');
        } else{
            $("#ip").val(toggleText);
            $("#ip").prop("disabled", false);
            $(this).removeClass('btn-warning').addClass('btn-default');
        }

    });
});

注意：您必须使用addClass()/removeClass();代替toogleClass()。

希望这有帮助。

Answer 2

试试这个：

$('#ipclear').click(function(){
            var attr = $('#ip').attr('disabled');
            if(attr == null)
            {
                $('#ip').attr('disabled', true);
            }
            else
            {
                $('#ip').attr('disabled', null);
            }
        });

Answer 3

您需要使用ToggleClass（）进行管理。单击按钮在输入上添加一个toggleclass并检查此类条件是否已禁用。

$(document).ready(function() {

  var toggleText = $("#ip").val();

  $("#ipclear").click(function() {
    $("#ip").toggleClass("click");
    if ($("#ip").hasClass('click')) {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});

Answer 4

试试这个，它的工作

$(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
  
    if ($("#ip").val() == 'N/A') {
    $("#ip").val(toggleText);
      toggleText = $("#ip").val();
      $("#ip").prop("disabled", false);
    } else{
     
        $("#ip").val('N/A');
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
      }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>

点击按钮

4 个答案: