Question

我想通过一次点击更改几个按钮的添加和删除禁用状态。我使用jquerymobile 1.4和jquery 10.2但该函数不适用于那些库版本。

这是html：

<!DOCTYPE html>
<html>  
    <head>
        <title>JQM latest</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.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    </head>
<body>

<div data-role="controlgroup" data-type="vertical">
    <fieldset data-role="controlgroup" data-type="vertical">
        <button id="btnPlay" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-video">Enregistrer</button>
        <button id="btnStop" disabled="" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-grid">Stop</button>
        <button id="btnLecture" disabled="" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">Ecouter/Valider</button>
        <button id="btnDoItAgain" disabled="" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">Recommencer</button>
    </fieldset>
    </div>    
            </body>

和JS：

function recordAudio(src) {
    $('#btnPlay').attr('disabled', 'disabled').button('disable');
    $('#btnStop').removeAttr('disabled').button('enable');
}    
function stopAudio(src) {
    $('#btnLecture').removeAttr('disabled').button('enable');
    $('#btnStop').attr('disabled', 'disabled').button('disable');
}    
function playAudio(src) {
    $('#btnDoItAgain').removeAttr('disabled').button('enable');
    $('#btnLecture').attr('disabled', 'disabled').button('disable');
}    

$('#btnPlay').click(function(e) {
    recordAudio();
});
$('#btnStop').click(function(e) {
    stopAudio();
});
$('#btnLecture').click(function(e) {
    playAudio();
});

$("[button]").button();
$("ul [data-role=controlgroup]").controlgroup();

这是http://jsfiddle.net/5B7Y2/ 谢谢你的帮助！

Answer 1

按钮小部件只能在input type="button"上使用，.button()标记上的<button>会导致button的双增强，将其包装在 div 中并应用该div上的所有样式。这导致在按钮内显示一个按钮。

而是添加/删除ui-state-disabled，或使用<input type="button" />而不是使用<button>标记。使用input，您可以使用.button()小部件。

function recordAudio(src) {
  $('#btnPlay,#btnStop').toggleClass("ui-state-disabled");
}

function stopAudio(src) {
  $('#btnLecture,#btnStop').toggleClass("ui-state-disabled");
}

function playAudio(src) {
  $('#btnDoItAgain,#btnLecture').toggleClass("ui-state-disabled");
}

<强> Demo

使用jquerymobile 1.4删除并向按钮添加属性

1 个答案: