How to disable header button of a collapsible in jquery mobile?

Question

I have a simple collapsible, made with jquery mobile. How can i disable the button in the header of the collapsible which is meant to expand collapse the collapsible? I want to disable it, being still able to collapse/expand programmatically. The whole thing is meant to prevent the user to collapse/expand in order to have the complete programmatical control of the moment a collapsible has to be expanded or not.

<div data-role="collapsible" data-collapsed="true" id="d27" name="d27" class="ui-block-a">
    <h4></h4>
    <div class="ui-block-a">
    <legend>D27: Question?</legend>
    </div>
    <div class="ui-block-b">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="nameHere" id="si27" value="1" />
        <label for="si27">Sì</label>
        <input type="radio" name="nameHere" id="no27" value="0" checked="checked" />
        <label for="no27">No</label>
        </fieldset>
    </div>
</div>

This is the button i mean:

Answer 1

To stop the click from working but maintain being able to trigger the expand use this jquery:

$(document).ready(function () {
    $("#d27 h4").click(function (event) {
        return false;
    });
});

This works in a browser only,to prevent it on mobile you also have to capture the tap event.

$("#d27 h4").on("tap", function (event, ui) {
    return false;
});

Hope it helps you.

Answer 2

I found a valid solution. Adding this will do the trick:

$("#d27 h4 a").click(function (event) {
    return false;
});

Answer 3

No need of any css or Jquery to disable this. Just include data-iconpos="none" in ur code as below.

<div data-role="collapsible" data-iconpos="none" data-collapsed="true" id="d27" name="d27" class="ui-block-a">
    <h4></h4>
    <div class="ui-block-a">
    <legend>D27: Question?</legend>
    </div>
    <div class="ui-block-b">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="nameHere" id="si27" value="1" />
        <label for="si27">Sì</label>
        <input type="radio" name="nameHere" id="no27" value="0" checked="checked" />
        <label for="no27">No</label>
        </fieldset>
    </div>
</div>