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');
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.