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

Example : $('input[class="busiProp"]:not(:checked)').attr('disabled',true); — Bugfixer, Nov 08 '16 at 06:50
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, Sep 21 '17 at 12:50
Possible duplicate of [Can HTML checkboxes be set to readonly?](https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly) — Denilson Sá Maia, Sep 21 '17 at 12:52

madalinivascu · Answer 1 · 2016-11-08T06:22:28.780

3

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);

edited Nov 08 '16 at 06:22

answered Nov 08 '16 at 06:00

madalinivascu

32,064
4
39
55

The checkbox is not necessarily placed right after (hence `.next()`) the `input[value="no"]`. You may want to consider some degree of generality in your answer – Peyman Mohamadpour Nov 08 '16 at 06:16
@Trix i don't want to :) – madalinivascu Nov 08 '16 at 06:21
3

Be advised: [disabled form inputs are not posted with form data](https://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-the-request). – Michael Hurley Oct 11 '18 at 16:18

score 0 · Answer 2 · edited Nov 08 '16 at 06:03

0

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

edited Nov 08 '16 at 06:03

madalinivascu

32,064
4
39
55

answered Nov 08 '16 at 05:59

Adrian Zelada Torrez

92
4

2

What is the benefit of using jQuery instead of HTML to make the input disabled? Why not using `` – Peyman Mohamadpour Nov 08 '16 at 06:13

score -1 · Answer 3 · answered Nov 08 '16 at 06:07

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.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">

@Trix, as per OP, checkbox needs to be readonly if the answer is **NO** . Now what if the user wanna change his/her option from **No** to **Yes**? — , Nov 08 '16 at 07:17

score -1 · Answer 4 · answered Nov 08 '16 at 06:13

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",
                });
            }
        });

How to make checkbox readonly

4 Answers4