simple jQuery function not working in some browsers

Question

I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:

<script type="text/javascript">
    $(function() {
        $('#rules_box').scroll(function () {
            if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
             $('#iagree').removeAttr('disabled');
            }
         });
    });
</script>

This works in most browsers. However some refuse to work. Even if I just have

$('#iagree').removeAttr('disabled');

by itself without scroll conditions. This page is running many other javascripts that are working.

Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.

Is jQuery too finicky to work? Does this mean I have to do it another way?

EDIT: you're quick to mark as a dupe, but this question hasn't been answered yet. Problem persists in same select browsers, see updated code

    $(function() {
        $('#rules_box').scroll(function () {
            alert('something');
            $('#iagree').prop("disabled", false); 
         });
    });

Does not fire alert or change checkbox state

Related: http://stackoverflow.com/questions/10242205/removeattr-not-removing-disabled-attribute-in-ie — Stryner, Aug 04 '15 at 14:45
"some refuse to work", "Some said it didn't work on their Mobile", "one said it didn't work on Firefox although it worked on my Firefox" So whats the situation?? if it's not consistant for two people on the same browser then it's unlikly to be a browser issue. — atmd, Aug 04 '15 at 14:48
jQuery is not generally finicky. In fact, it is often used because it is MORE cross browser solid than plain JS. So, you can't attribute this to broad jQuery finickiness. That said, there could be a bug somewhere, but it seems more likely your code is generating some sort of error under some conditions which is causing the operation to fail. What version of jQuery are you using? What version of browsers does it have a problem in? — jfriend00, Aug 04 '15 at 14:49
I just updated jquery to most recent 1X to make sure, 1.11.3, and the problem remains. @atmd Yeah, if they have an older browser that could be a problem, Firefox 3-40 probably don't handle the same. Unfortunately, I don't have the means to know what browser version the clients are using, they just like saying 'it doesn't work' and it gets passed on to me. That said the versions I know it doesn't work in are my crappy 2011 phone's onboard browser(android icecream sandwich) and the client just said 'firefox' — Kiwizoom, Aug 04 '15 at 15:06

score 0 · Answer 1 · answered Aug 04 '15 at 14:49

0

For checkbox elements, you should use .removeProp() instead of .removeAttr()

$('#iagree').removeProp('disabled');

Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/

answered Aug 04 '15 at 14:49

Doc

177
1
3
14

noted, this may be a problem down the road. But for example, the $('#rules_box').scroll( { alert("something") }); will not work in these browsers, or atleast the one I'm having trouble with. I am changing this to removeProp anyway as you suggested – Kiwizoom Aug 04 '15 at 14:50

score 0 · Answer 2 · answered Aug 04 '15 at 14:54

0

Please use

$('#iagree').prop("disabled", false);

answered Aug 04 '15 at 14:54

Sebri Zouhaier

745
7
18

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Use .prop('disabled',false) instead of removeAttr('disabled').

simple jQuery function not working in some browsers

3 Answers3