Functions for disabling checkboxes not working corrently

Question

The functionality is: When 1 of the checkboxes is checked, the other must be disabled. It's working, but after updating the WordPress page and trying to edit the checkbox, i got the following problem:

First i've checked the Display Excerpt, then updated the page and as you can see, there are 2 boxes which are checked

Checkboxes"

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

And here're the functions:

function disableContentCheckbox(){
            if (document.getElementById('dx_article_excerpt').checked) {
                document.getElementById("dx_article_content").disabled = true;
            } else {
                document.getElementById("dx_article_content").disabled = false;
            }
        }
        function disableExcerptCheckbox(){
            if (document.getElementById('dx_article_content').checked) {
                document.getElementById("dx_article_excerpt").disabled = true;
            } else {
                document.getElementById("dx_article_excerpt").disabled = false;
            }
        }

Why is this happening ?

Have a look at this answer [Can you style an html radio button to look like a checkbox?](https://stackoverflow.com/a/8079482/3993662) on how to style your radio like a checkbox — baao, Jun 29 '17 at 14:20

score 1 · Accepted Answer · answered Jun 29 '17 at 14:24

Just uncheck the other checkbox when you disable it.

I commented out document.getElementById("dx_article_content").disabled = true; just to show you how it looks when you checked one and click on the other one. Uncomment them in your code.

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

<script>
  function disableContentCheckbox() {
    if (document.getElementById('dx_article_excerpt').checked) {
      document.getElementById('dx_article_content').checked = false;
      //document.getElementById("dx_article_content").disabled = true;
    } else {
      document.getElementById("dx_article_content").disabled = false;
    }
  }

  function disableExcerptCheckbox() {
    if (document.getElementById('dx_article_content').checked) {
      document.getElementById('dx_article_excerpt').checked = false;
      //document.getElementById("dx_article_excerpt").disabled = true;
    } else {
      document.getElementById("dx_article_excerpt").disabled = false;
    }
  }
</script>

@RumenPanchev I still don't understand why radio buttons aren't being used. — evolutionxbox, Jun 29 '17 at 14:32

score 0 · Answer 2 · answered Jun 29 '17 at 14:19

0

Well, the way I see it, you have two options.

One would be to change the checked attribute yourself when catching the event.

The second option would be to use radio buttons instead.

answered Jun 29 '17 at 14:19

Midnight_Blaze

481
6
29

1

https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript – Midnight_Blaze Jun 29 '17 at 14:23

Functions for disabling checkboxes not working corrently

2 Answers2