Search code examples
javascriptjqueryhtmltwitter-bootstraptoggle

bootstrap toggle - how to always have value to on and not disabled


I am using bootstraptoggle on a test page.

The docs clearly state to prevent users from changing the value of the checkbox to add disabled to the element.

However, as I must submit the form, the bootstrap element cannot be disabled.

How do I prevent the user from changing the bootstrap toggle without disabling the element?

That is, when the user clicks on the bootstrap element, the bootstrap toggle will remain in the on state?

I have tried numerous attempts - all failed and google search does not help.

Here is my HTML code:

<input type="checkbox" id="id_document_format_adobe" checked name="document_format" value="pdf" onclick="blur(); return false;" />

Here is my js code:

$('#id_document_format_adobe').bootstrapToggle({
  height: '30',
  width: '45',
  off: 'No',
  on: 'Yes',
  size: 'mini',
  style: 'soften',
  width: '50'
})

// set the pdf toggle switch on.
// the checkbox cannot be disabled at the element.
$('#id_document_format_adobe').bootstrapToggle('on');

Solution

  • OK. I just found an obscure post.

    Here is my solution.

    Add the alwaysToggleOn to the element.

    <input type="checkbox" id="id_document_format_adobe" checked name="document_format" value="pdf" onclick="blur(); return false;" onchange="alwaysToggleOn();" />
    

    And in my js:

        function alwaysToggleOn() {
            $("#id_document_format_adobe").data('bs.toggle').on(true);
        }
    

    I hope this helps someone.