Checkbox is not disabled after checking other checkbox

Question

I have 2 checkboxes:

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

I want when the first is clicked, the content checkbox to be disabled automatically. I've tried the following thing:

if (document.getElementById('dx_article_excerpt').checked) {
    document.getElementById("dx_article_content").disabled = true;
}

But guess what.. it's not working.

use radio button it is made for this kind of function

guradio
– guradio

2017-06-28 09:31:32 +00:00
Commented Jun 28, 2017 at 9:31 — guradio
– guradio, Commented Jun 28, 2017 at 9:31

Bourbia Brahim · Accepted Answer · 2017-06-28 09:30:15Z

1

Use click event to change the content check status as below snippet using jquery :

$(function() {
  $("#dx_article_excerpt").click(function(){
     $("#dx_article_content").prop("disabled",this.checked);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="dx_article_excerpt"><label for="dx_article_excerpt">first</label></div>
<div><input type="checkbox" id="dx_article_content"><label for="dx_article_content">content</label></div>

answered Jun 28, 2017 at 9:30

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guradio · Accepted Answer · 2017-06-28 09:33:57Z

1

$(".checkbox").change(function() {
  $(".checkbox").not(this).prop("disabled", $(this).is(":checked"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="dx_article_excerpt" class="checkbox"><label for="dx_article_excerpt">1</label></div>
<div><input type="checkbox" id="dx_article_content" class="checkbox"><label for="dx_article_content">2</label></div>

1. Add a class for both checkbox. 2. Use the status of current checkbox changed to prop disabled of the other checkbox

answered Jun 28, 2017 at 9:33

guradio

15.6k4 gold badges39 silver badges65 bronze badges

1 Comment

guradio Over a year ago

@RumenPanchev did you add the class to both checkbox?

prasanth · Accepted Answer · 2017-06-28 10:05:55Z

1

Why is not working?

Because no event is there .assign onchange event

onchange="change()"
Wrap the js inside the function

Updated with toggle

function change(){
        document.getElementById("dx_article_content").disabled = document.getElementById('dx_article_excerpt').checked;
}

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

edited Jun 28, 2017 at 10:05

answered Jun 28, 2017 at 9:30

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

Checkbox is not disabled after checking other checkbox

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related