CODEWITHSUNDEEP
javascriptjqueryjquery-mobilebutton
henri_1310
henri_1310

Reputation: 315

remove and add attribute to button with jquerymobile 1.4

I want to change add and remove disabled state for several buttons with one click. I use jquerymobile 1.4 and jquery 10.2 but the function doesn't work with those library versions.

Here is the 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>

And the 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();

Here is the http://jsfiddle.net/5B7Y2/ Thanks for your help!

Upvotes: 1

Views: 1180

Answers (1)

Omar
Omar

Reputation: 31732

Button widget can only be used on input type="button", using .button() on <button> tag will result in double enhancement of the button, by wrapping it in a div and apply all styles on that div. This results in showing a button inside a button.

Instead add/remove ui-state-disabled, or use <input type="button" /> rather than using <button> tag. With input you can use .button() widget.

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

Upvotes: 2

Related Questions