Radio button checked attribute is not getting set to false

Question

I have 2 buttons yes and no, and simply I am toggling them.

<!DOCTYPE html>
   <html>
      <head>
         <title>Demo Project</title>
      </head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src=""></script>
      <script>  
          function enableCheckBoxAndDisableNoRadioButton() {
             $(".checkbox").attr("checked",true);
             $("#no").attr("checked", false);
          }

          function disableCheckBoxAnddisableYesRadioButton() {
             $("#yes").attr("checked", false);
             $(".checkbox").attr("checked",false);
          }
      </script>
      <body>
         <input class="checkbox" type="checkbox" >
         <p>yes <input id="yes" type="radio" onchange="enableCheckBoxAndDisableNoRadioButton()"></p>
         <p> no<input id="no" type="radio" checked=true onchange="disableCheckBoxAnddisableYesRadioButton()"></p>
      </body>
   </html>

When I click at yes, that time no button getting deselected and checkbox getting selected. But when I click at the no button, that time checkbox getting deselected but yes button is selected too. I want to make it deselect.

Let me know what is the problem.

I am running this code on chrome: 53.0.

score 5 · Answer 1 · answered Feb 20 '17 at 06:58

Use prop insted of attr.

function enableCheckBoxAndDisableNoRadioButton() {
    $(".checkbox").prop("checked", true);
    $("#no").prop("checked", false);
  }

  function disableCheckBoxAnddisableYesRadioButton() {
    $("#yes").prop("checked", false);
    $(".checkbox").prop("checked", false);

  }

Working Fiddle

score 1 · Answer 2 · edited Feb 20 '17 at 07:01

1

in place of attr, i changed it to .prop and it is working now.

edited Feb 20 '17 at 07:01

Parvez Rahaman

4,269
3
22
39

answered Feb 20 '17 at 06:55

Jitendra Yadav

150
1
3
16

score 0 · Answer 3 · answered Feb 20 '17 at 07:13

0

change .attr to .prop then it worked

answered Feb 20 '17 at 07:13

Taufik Nur Rahmanda

1,862
2
20
36

score 0 · Answer 4 · edited May 23 '17 at 11:53

You need to check where we can use .prop() / .attr()

Use .prop() instead of .attr() in the most of cases.

See some list of attributes and property below:

| **Attribute/Property** | **Attribute**  | Property

| accesskey              |      Yes       |    No
| align                  |      Yes       |    No
| async                  |      Yes       |    Yes
| autofocus              |      Yes       |    Yes
| checked                |      Yes       |    Yes
| class                  |      Yes       |    No
| href                   |      Yes       |    No
| multiple               |      Yes       |    Yes
| readonly               |      Yes       |    Yes

and read more about .prop() vs .attr()

Radio button checked attribute is not getting set to false

4 Answers4