Help me summarize these huge switch statements

Hey guys, so im working on a JS script that basically just takes an ID and value, then disables/enables a bunch of inputs depending on the value type (using a switch statement), then executes another function doing something similar. It works fine, just really ugly. I figured theres gotta be a better way to do it...

Heres the code, let me know if you guys have any ideas!


syncAttributeSettings(1, 'string');
syncAttributeSettings(2, 'text');
syncAttributeSettings(3, 'select');
syncAttributeSettings(4, 'multiselect');
syncAttributeSettings(5, 'boolean');

var syncAttributeSettings = function(row_id, value){
    switch(value){
        case 'string':
            $('#placeholder-' + row_id).removeAttr('readonly');
            $('#primary-' + row_id).removeAttr('readonly');
            $('#unique-' + row_id).removeAttr('readonly');
            $('#regex-' + row_id).removeAttr('readonly');
            $('#min-' + row_id).removeAttr('readonly');
            $('#max-' + row_id).removeAttr('readonly');
            break;

        case 'text':
            $('#placeholder-' + row_id).removeAttr('readonly');
            $('#primary-' + row_id).removeAttr('readonly');
            $('#unique-' + row_id).removeAttr('readonly');
            $('#regex-' + row_id).removeAttr('readonly');
            $('#min-' + row_id).removeAttr('readonly');
            $('#max-' + row_id).removeAttr('readonly');
            break;

        case 'select':
            $('#placeholder-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).prop('checked', false);
            $('#unique-' + row_id).removeAttr('readonly');
            $('#regex-' + row_id).attr('readonly','readonly');
            $('#regex-' + row_id).val('');
            $('#min-' + row_id).attr('readonly','readonly');
            $('#min-' + row_id).val('');
            $('#max-' + row_id).attr('readonly','readonly');
            $('#max-' + row_id).val('');
            break;

        case 'multiselect':
            $('#placeholder-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).prop('checked', false);
            $('#unique-' + row_id).removeAttr('readonly');
            $('#regex-' + row_id).attr('readonly','readonly');
            $('#regex-' + row_id).val('');
            $('#min-' + row_id).removeAttr('readonly');
            $('#max-' + row_id).removeAttr('readonly');
            break;

        case 'boolean':
            $('#placeholder-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).attr('readonly','readonly');
            $('#primary-' + row_id).prop('checked', false);
            $('#unique-' + row_id).attr('readonly','readonly');
            $('#unique-' + row_id).prop('checked', false);
            $('#regex-' + row_id).attr('readonly','readonly');
            $('#regex-' + row_id).val('');
            $('#min-' + row_id).attr('readonly','readonly');
            $('#min-' + row_id).val('');
            $('#max-' + row_id).attr('readonly','readonly');
            $('#max-' + row_id).val('');
            break;
    }

    /* Change value input to match this type
     */
    changeValueType(row_id, value);
}

var changeValueType = function(id, newType){

    switch (newType){

        case 'select':
            $('#string_' + id).css({"display":"none"});
            $('#select_' + id).css({"display":"block"});
            $('#boolean_' + id).css({"display":"none"});
            $('#multiselect_' + id).css({"display":"none"});
            $('#text_' + id).css({"display":"none"});
            break;

        case 'text':
            $('#string_' + id).css({"display":"none"});
            $('#select_' + id).css({"display":"none"});
            $('#boolean_' + id).css({"display":"none"});
            $('#multiselect_' + id).css({"display":"none"});
            $('#text_' + id).css({"display":"block"});
            break;

        case 'multiselect':
            $('#string_' + id).css({"display":"none"});
            $('#select_' + id).css({"display":"none"});
            $('#boolean_' + id).css({"display":"none"});
            $('#multiselect_' + id).css({"display":"block"});
            $('#text_' + id).css({"display":"none"});
            break;

        case 'boolean':
            $('#string_' + id).css({"display":"none"});
            $('#select_' + id).css({"display":"none"});
            $('#boolean_' + id).css({"display":"block"});
            $('#multiselect_' + id).css({"display":"none"});
            $('#text_' + id).css({"display":"none"});
            break;

        default:
            $('#string_' + id).css({"display":"block"});
            $('#select_' + id).css({"display":"none"});
            $('#boolean_' + id).css({"display":"none"});
            $('#multiselect_' + id).css({"display":"none"});
            $('#text_' + id).css({"display":"none"});
            break;
    }
};

EDIT

I changed the changeValueType function to cut it down..

var changeValueType = function(id, newType){
    var types = ['string','text','select','multiselect','boolean'];

    $.each(types , function(i, val) {
        if(newType === val) {
            $('#' + val + '_' + id).addClass('display-block');
            $('#' + val + '_' + id).removeClass('display-none');
        } else {
            $('#' + val + '_' + id).addClass('display-none');
            $('#' + val + '_' + id).removeClass('display-block');
        }
    });
};

So now just want to cut down the syncAttributeSettings() ... Its so ugly!

Topic Participants
jhyland87
jtara-jquery

Help me summarize these huge switch statements

Help me summarize these huge switch statements

Topic Participants

jhyland87

jtara-jquery