How to uncheck a custom design radio button in Framework7?

Question

I have problem with custom design radio button, I wonth to let user uncheck radio button.

Here is html code:

<input type="radio" id="tip11" name="tip1" value="Stan" />
<label for="tip11">Stan<span></span></label> <br><br>

Here is css code:

input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:  20px;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align:middle;
    background:url(../images/checkbox.png) left top no-repeat;
    background-size: 20px 20px;
    cursor:pointer;
    border-radius: 2px;
    float:right;
}
input[type="radio"]:checked + label span {
    background-color: #4bc2ff;
}

And here is JS code in Framework7:

$$('#cc').click(function (e) {
    console.log('cao');
    $$('#sortForm11').prop('checked', false);
});

Just for test purpose I wonted to be able to click and in same event to be able to check and uncheck radio button, but custom design radio button stay checked.

Answer 1

$$('input[name=sortForm11] + label span').on('click', function (e) {
         var $radio = $(this).parent().prev();
         // if this was previously checked
         if ($radio.is(':checked')) {
             $$('input[name=sortForm11]').removeAttr('checked');
             $radio.removeAttr('checked');
             //onsole.log('cao1');
         } else {
            $$('input[name=sortForm11]').removeAttr('checked');
             $radio.attr('checked', 'checked');
             //console.log('cao2');
         }
         e.preventDefault();
 });