Question

我有这段代码（doc）：

<!DOCTYPE html> 
<html> 
<head> 
  <title>123</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

</head> 

<body> 

<form>
  <input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value="">
  <div id="charactersLeft"></div>
  <input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled">
</form>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>

<script>


$(document).ready(function(){

$('#comment').bind('hastext', function () {
  $('#commentButton').removeAttr('disabled');
});

$('#comment').bind('notext', function () {
  $('#commentButton').attr('disabled', 'disabled');
});

$('#comment').bind('textchange', function (event, previousText) {
  $('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});

});

</script>
</body>
</html>

如果我删除了css，这是有效的。

在Chrome控制台中：

$('#commentButton');

<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-theme="b" value="Отправить" disabled="disabled" class="ui-btn-hidden" data-disabled="true">

非常奇怪，因为在HTML中我还没有class="ui-btn-hidden"。所以，我可以在<script>：

中进行一些更改

$('#comment').bind('hastext', function () {
  $('#commentButton').removeClass('ui-btn-hidden').removeAttr('disabled');

});

然后apears +1按钮！看起来像“风格冲突”，因为没有CSS一切正常！

如何解决这个问题？感谢。

Answer 1

您需要使用jQuery Mobile button widget methods 来启用/禁用按钮

$('#comment').bind('hastext', function () {
  $('#commentButton').button('enable');
});

$('#comment').bind('notext', function () {
  $('#commentButton').button('disable');
});

已禁用按钮与jquery移动

1 个答案: