Question

Can anyone check and advice if my code is standard for mobile device? I can’t seem to make it work on iPhone and my android. This works well on my desktop but not on mobile devices. I’m trying to create a toggling checkbox, that when a user check the checkbox it will show the button, if it’s uncheck it will show the disabled version (‘#disableBtn’)

Javascript + Jquery

$(function()
{   
    $('#agreed').change(function()
    {
        if ($(this).attr("checked"))
        {
            $('#disableBtn').hide();
            $('#button').css('display', 'block');
            return;
        }
        $('#disableBtn').show();
        $('#button').css('display', 'none')
    });
})

HTML

<input id="agreed" type="checkbox" name="check" value="1">

<a id="button" href="#>">Button</a>
<span id="disableBtn">Disabled</span>

CSS

#button { display: none }

Answer 1

if ($(this).attr("checked")) is completely wrong and I can’t believe it works on your desktop browser. Your code checks whether there is an attribute checked on the input – and no, there will never be one. See http://api.jquery.com/prop/ – which even uses “checked” in the explanation. Instead it should be

if (this.checked) {
...

Apart from that, buttons and inputs (if you’d use a real button, not an anchor – see also Change the appearance of a disabled link) have a native property disabled. Use it.