Unable to set 'checked' attribute to MDL switch component

Here is the code to where I'm trying to set the 'checked' attribute of the MDL switch, where the value of userRoles.roles.subs is true.

 var dbRef = firebase.database().ref('users/' + window.localStorage.getItem('UserID')).on('value', function(snapshot){
        var userRoles = snapshot.val();
        console.log(userRoles.roles.subs);
        $('.subs')[0].checked = userRoles.roles.subs;
        // See http://ift.tt/2fyyc45
        // Related http://ift.tt/2xNJBa3

    })

None of the references seem to work in this case. Below is the component

<div class="mdl-cell mdl-cell--7-col">       
    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="sendNews">
          <input type="checkbox" id="sendNews" class="mdl-switch__input subs">
          <span class="mdl-switch__label">Send me weekly InfoArticle via Email</span>
    </label>

</div>