Change radio button to checkbox displays indeterminate in chrome

Im trying to make a radio button list appear as a checkbox list but with the benefits of a radio button list (i.e only 1 value can be submitted).

However the problem I am facing is that in Google Chrome a default value is set on 'indeterminate' while it should be set as 'false'. The first value of the list should be 'true' by default and that currently works. How can I prevent the second value from being set on indeterminate. The code can behave strange sometimes as refreshing the browser sometimes result in unchecking the indeterminate and sometime checking it back to indeterminate. I haven't found a pattern in this.

    <style type="text/css">input[type="radio"] {
        -moz-appearance: checkbox;
        -webkit-appearance: checkbox;
    }


}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>

 $( document ).ready(function() {    
        $("input[type=radio]:eq(0)").prop("checked", true);
        $("input[type=radio]:eq(0)").data("ischecked", true);
        $("input[type=radio]:eq(1)").prop("checked", false);
        $("input[type=radio]:eq(1)").addClass( "opt-in-radio" );



        $('form').on('click', ':radio', function() {
            var status = $(this).data('ischecked'); //get status
            status && $(this).prop("checked", false); //uncheck if checked
            $(this).data('ischecked', !status); //toggle status
            if (this.className == "opt-in-radio") $("input[type=radio]:eq(0)").prop("checked", !this.checked)
        });
    });
</script>