0

我有这个代码（文档）：

<!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');

});

然后出现+1按钮！看起来像“样式冲突”，因为没有 css 一切正常！

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

4

1 回答 1

0

You need to use jQuery Mobile button widget methods to enable/disable buttons

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

$('#comment').bind('notext', function () {
  $('#commentButton').button('disable');
});
于 2013-07-20T19:24:24.840 回答