JQuery + Testing element values ​​(extension)

Question

So, I have a structure that I am editing that includes Javascript Object, called bulk .

I have a function (with some errors), but I feel that I am doing too much manipulation DOM. The problem is hardcoded values ​​with mine jQuery.

I will not post all the code here, but only what interests me:

(full code in this script if interested - http://jsfiddle.net/G689t )

Let me list the main parameters, so it makes sense:

• You have one capacity 10.
• When you choose checkboxes, it logically identifies which checkboxis available and disables those that are not.
• It is also necessary to delete the status disabled, if checkboxnot selected. Counter
• speedchanges our total capacityto -/+1 based on a level of 1-4 .
• speedand capacityit is necessary to exchange data for the UI .

I wrote functionthat does this, but I just feel like my code is being manipulated too much DOM.

Can someone help with combining this process into a singular one functionfor checking / updatingDOM based on the values ​​that I described?

• PC = Power Capacity (capacity)
• speed = symbol speed (speed)

(JS):

:

var bulk = {
    speed: 1,
    damage: 0,
    type: 'P',
    statEf: [],
    health: 0,
    minion: [0],
    pc: 10,
    exp: 9000
};

// CORE UPDATE FUNCTION FOR VALUES / DISABLE / ENABLE
$(':checkbox, input[type="button"]').on('click', function() {
    if(bulk.pc <= 1){
        $('#addSpeed').attr('disabled', 'disabled');
        $('#remSpeed').removeAttr('disabled');
    } else if(bulk.speed > 2){
        $('#remSpeed').removeAttr('disabled');
    }
    if(bulk.pc <= 1 && bulk.pc !== 4){
        $('#remSpeed').removeAttr('disabled');
        $('#addSpeed').removeAttr('disabled');
    }
});

value, functions ?

, one , :

• checkbox['data-pc'] bulk.pc, , checked.
• bulk.speed 1, remSpeed
• bulk.speed 4, addSpeed

( , , )

switch case parameters, .

( , - http://jsfiddle.net/G689t)

PS: , -

VALUES/DISABLE/ENABLE.

Answer 1

( ) DOM, .

, . , , if / else if / else. - , .

:

: http://jsfiddle.net/ZBGLb/1/

function updateDom(){
    if(bulk.pc < 1 || bulk.speed >= 4){
        $('#addSpeed').attr('disabled', 'disabled');
    }
    if(bulk.speed <= 1){
        $('#remSpeed').attr('disabled', 'disabled');
    }
    if(bulk.speed > 1){
        $('#remSpeed').removeAttr('disabled');
    }
    if(bulk.speed < 4 && bulk.pc > 0){
        $('#addSpeed').removeAttr('disabled');
    }
    $(":checkbox").each(function() {
        if($(this).data('pc') > bulk.pc && $(this).prop('checked')==false){
            $(this).attr('disabled', 'disabled');
        } else if ($(this).data('pc') <= bulk.pc) {
            $(this).removeAttr('disabled');
        }
    });
    for (var key in bulk) {
        $('#' + key).text(bulk[key]);
    };
}

, , updateDom() , .

// ADD SPEED FUNCTION
$('#addSpeed').on('click', function() {
    bulk.speed += 1;
    bulk.pc -= 1;
    updateDom();
});

// REDUCE SPEED FUNCTION
$('#remSpeed').on('click', function() {
    bulk.speed -= 1;
    bulk.pc += 1;
    updateDom();
});

, , object, DOM Manipulation, .

: http://jsfiddle.net/ZBGLb/1/