how to dynamically enable and disable button when checkbox is checked and unchecked in semantic UI

Question

How does one dynamically enable and disable the button when the checkbox is checked and unchecked in semantic UI, I've spent so much time to do this.

Here is the html

<div class="ui fitted checkbox">
<input type="checkbox" > <label></label>
</div>
<div class="ui small positive disabled button" id="edit">
<i class="edit icon"></i> Edit
</div>

Here is my javascript

<script>
    $(document).ready(function () {
                    if (
                    $('#cek').checkbox({
                        onChecked: function () {
                        }
                    })) {
                        $('#edit').removeClass('disabled');
                    } else {
                        $('#edit').addClass('disabled');       
                    }
                });
</script>

Please help, it drives me crazy.

AmmarCSE · Accepted Answer · 2015-05-29 11:34:33Z

1

Use toggleClass() like

 $(document).ready(function() {
             $('[type="checkbox"]').change(function() {
                     $('#edit').toggleClass('disabled');
                 });
             });

This will add the class if it does not exist or remove it if it does.

$(document).ready(function() {
      $('[type="checkbox"]').change(function() {
         
          $('#edit').toggleClass('disabled');
        });
      });

.disabled {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="ui fitted checkbox">
  <input type="checkbox" />
  <label></label>
</div>
<div class="ui small positive disabled button" id="edit">
  <i class="edit icon"></i> Edit
</div>

edited May 29, 2015 at 11:34

answered May 29, 2015 at 11:17

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

7 Comments

AmmarCSE Over a year ago

@AudioAlief, sorry there was a syntax error. See it now

Audio Alief Over a year ago

@AmmarCE, i appriciate your code man,but in semantic, to make the checkbox is checked you must add the js something like : $('ui.checkbox').checkbox(); , so if i use your code,i must remove the <div class=ui fitted button></div> , and left the checkbox unstyled

AmmarCSE Over a year ago

@AudioAlief, thats fine, include $('ui.checkbox').checkbox(); before my code and it should work

Audio Alief Over a year ago

$('ui.checkbox').checkbox();   $(document).ready(function() {              $('[type="checkbox"]').change(function() {                      $('#edit').toggleClass('disabled');                  });              });

thats all didnt work, i swear :(

Audio Alief Over a year ago

no need to apologize , i appriciate your answer man,it was helpful,really ,thank you so much brother :D

|

Collectives™ on Stack Overflow

how to dynamically enable and disable button when checkbox is checked and unchecked in semantic UI

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related