如何切换输入雕像禁用

时间:2017-10-12 14:56:12

标签: jquery input disabled-input isenabled

在我问到我在Stackoverflow上搜索的问题之前,我发现我可以通过prop或attr禁用或启用输入, 但当我试图实现这一点 - 如下面的例子 - 它不想切换,我错过了什么? 谢谢



$(function() {

  $('#submit').on('click', function() {
    $('body').prepend('<div class= "item" ></div>');
    if ($('.item').length > 0) {
      $('#search').removeAttr('disabled');
    }
    if ($('.item').length == 0) {
      $('#search').attr('disabled', 'disabled');
      //$('#search').prop('disabled', true);

    }

  });

  $('#reset').on('click', function() {
    $('.item').remove();
  })
});
&#13;
button {
  display: inline-block
}

input {
  position: fixed;
  bottom: 0;
  right: 0
}

.item {
  width: 50px;
  height: 50px;
  background: orangered;
  margin: 5px
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search' disabled>
<button id='submit'>Submit</button>
<button id='reset'>Reset</button>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

对于您的HTML,请使用:

<input type='search' id='search' disabled="disabled">
<button id='submit'>Submit</button>
<button id='reset'>Reset</button>

请注意[禁用=&#34;禁用&#34;],然后使用JavaScript:

<script>
(function() {
  var searchInput = $("#search");
  var searchAttr = $("#search").attr("disabled");

  $( "#submit" ).click(function() {
    $('body').prepend('<div class= "item" ></div>');
    if ( $('.item').length === 0 ) { // Use triple equals for exact type check

      searchInput.attr( "disabled", searchAttr );
    } else{
      searchInput.removeAttr("disabled");
    }
  });

  $('#reset').on('click', function() {
    $('.item').remove();
    searchInput.attr( "disabled", searchAttr );
  })
})();
</script>

这应该有效。

答案 1 :(得分:1)

你不需要检查生成的div的长度,只需根据点击播放禁用的true或false:

$(function() {

  $("input").prop('disabled', true);
  $('#submit').on('click', function() {
        $('body').prepend('<div class= "item" ></div>');
        $("input").prop('disabled', false);
  });

  $('#reset').on('click', function() {
        $('.item').remove();
        $("input").prop('disabled', true);
  })
});
button {
  display: inline-block
}

input {
  position: fixed;
  bottom: 0;
  right: 0
}

.item {
  width: 50px;
  height: 50px;
  background: orangered;
  margin: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search'>
<button id='submit'>Submit</button>
<button id='reset'>Reset</button>