Change attr to class with jquery

Question

I have this script:

$(document).ready(function() {
    $('#Checkout1').addClass('disabled');
    $('#voorwaarden').change(function() {
        $('#Checkout1').attr('disabled', $(this).is(':checked') ? null : 'disabled');
    });
});

The script is no change the attr disabled. But how can i change this script to this thing. When you change the #voorwaarden. Than remove the class diabled from #checkout1. And when i changed next the #voorwaarden. Than add class and going furter and furter. #voorwaarden is an checkbox.

Thanks!

Answer 1

Simply do with toggleClass()

$(document).ready(function() {
    $('#Checkout1').addClass('disabled');
    $('#voorwaarden').change(function() {
        $('#Checkout1').toggleClass('disabled');
    });
});

Note : http://api.jquery.com/toggleClass/

---

Edited : In case that you want to toggle 'disabled' property,

$(document).ready(function() {
    $('#Checkout1').prop('disabled', true);
    $('#voorwaarden').change(function() {
        $('#Checkout1').prop('disabled', !$('#Checkout1').prop('disabled'));
    });
});

Answer 2

I'm not entirely sure I understand your question, but if your goal is to add the class "disabled" when the checkbox is not checked, and remove it when it is, then:

$(document).ready(function() {
    $('#Checkout1').addClass('disabled');
    $('#voorwaarden').change(function() {
        $('#Checkout1').toggleClass('disabled', !this.checked);
    });
});

toggleClass will add the class if the flag is true, or remove it if the flag is false.