使用 jquerymobile 1.4 删除并添加属性到按钮答案

【问题标题】：remove and add attribute to button with jquerymobile 1.4使用 jquerymobile 1.4 删除并添加属性到按钮
【发布时间】：2014-01-29 22:48:27
【问题描述】：

我想一键更改多个按钮的添加和删除禁用状态。我使用 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/ 感谢您的帮助！

【问题讨论】：

标签： javascript jquery jquery-mobile button

【解决方案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

【讨论】：

@codeinheaven 不客气 :) 我还推荐锚点 a。