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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 8, 2016 at 5:56 Gurudutt SharmaGurudutt Sharma 53222 gold badges66 silver badges1919 bronze badges 4

• Try to disable the checkbox – Steve Commented Nov 8, 2016 at 5:58
• Example : $('input[class="busiProp"]:not(:checked)').attr('disabled',true); – Bugfixer Commented Nov 8, 2016 at 6:50
• 2 Note: making an input element disabled will not submit it with the form. Thus, a checked checkbox that is also disabled will behave as if it were unchecked. Which is fine for the purposes of this question (given the description), but is not fine for the general case. – Denilson Sá Maia Commented Sep 21, 2017 at 12:50
• Possible duplicate of Can HTML checkboxes be set to readonly? – Denilson Sá Maia Commented Sep 21, 2017 at 12:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Use the disabled property to make the input readonly

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

<script src="https://ajax.googleapis./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);

$('input[name="data[User][no_alerts]"]').attr({
                'disabled' : true,
            });

You may like this code snippet:

$(function() {
  var chk = $('input[name="data[User][no_alerts]"]');//got check-box
  $('input[name="data[User][email_status]"]').on('change', function(e) {
    chk.prop('disabled', false); //enable first
    if ('no' == this.value) {
      chk.prop({
        'disabled': true,
        'checked': false
      });
    }
  });
  $('input[name="data[User][email_status]"]:checked').trigger('change');//fire code on page load
});

<script src="https://ajax.googleapis./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">

this can also be used

 $('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,
                    'disabled':"disabled",
                });
            }
        });