How to make checkbox readonly

Question

I have a form with with two fields one is radio button and second one is checkbox. I want to make checkbox unchecked(If checked) and readonly when radio button value is No. My code is working for unchecked functionality but readonly does not work.Please help me

This is my code:

Html :

<input type="radio" name="data[User][email_status]" id="" value="yes">Yes&nbsp;&nbsp;
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No 
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">

Jquery code :

$(document).ready(function() {
    $('input[name="data[User][email_status]"]').change (function(){
        //console.log($(this).val());
        if ($(this).val() == 'no')  {
            $('input[name="data[User][no_alerts]"]').attr({
                'checked' : false,
            });
        }
    });  
});

Thanks

Answer 1

Use the disabled property to make the input readonly

  $('input[value="no"]:checked').next().prop("disabled", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="data[User][email_status]" id="" value="yes">Yes&nbsp;&nbsp;
<input type="radio" name="data[User][email_status]" id="" value="no" checked="checked">No
<input type="checkbox" name="data[User][no_alerts]" id="" value="yes">

or a more general approach

 $('input[value="no"]:checked').parent().find('input[type="checkbox"]').prop("disabled", true);