So I have an interesting bug that my brain can't figure out.
In the app I am working on there are several bootstrap toggle buttons that have the ability to be disabled. However, it seems in internet exploder the disabled="disabled" property is not being adhered to.
The red x appears over the button and it is greyed out, but when clicked it still changes the state.
An example of the code in a jsbin https://jsbin.com/koqapejome/1/edit?html,css,output
My html buttons look like this. Notice I am taking advantage of bootstrap 3's data-toggle
<div class="btn-group toggle" data-toggle="buttons-radio"> <button disabled="disabled" type="button" data-label="Something here" data-type="CHECKBOX" data-name="name" name="name" id="form_154_emailList" class="btn yes active">Yes</button> <button disabled="disabled" type="button" class="btn no">No</button> </div> Is there a reason why the disabled is not fully working in ie? Is this a known issue? I could only find vague posts about switching it to disabled="true" which did not work either.
Through testing I can see an 'active' class being added when clicked, however when trying to add a click handler to disable the click it is not recognized when clicked. So it seems to be something else adding that...but I can't figure out what.
Does anyone know what could be causing this? Is it the bootstrap click that is ignoring the disable?
2 Answers
Answers 1
You can use this code to do not trigger in all browsers:
.toggle{ cursor:no-drop } .btn:disabled{ pointer-events:none; } Answers 2
I think the problem is with your custom style. You can check out working version here.
The problem was with following styles in particular.
.btn-group.toggle .btn.yes.active .btn-group.toggle .btn.no.active They should have been:
.btn-group.toggle .btn.yes.active:enabled .btn-group.toggle .btn.no.active:enabled Or you can apply different style with following styles:
.btn-group.toggle .btn.yes.active:enabled .btn-group.toggle .btn.yes.active:disabled .btn-group.toggle .btn.no.active:enabled .btn-group.toggle .btn.no.active:disabled 
0 comments:
Post a Comment