js函数中的多个if / else语句用于唯一输入禁用

Question

I'm bringing this up because I'm still learning javascript. I'm almost positive that this is not the correct way to write this function, but it works. It's ugly as hell, but it works. Just from a look at the script, can you see an obvious oversight that would have made the code a lot neater and more semantic?

    $('#model').on('change', function(){
    var yxs = $('#model').find('option:selected').attr('data-yxs');
    var ys = $('#model').find('option:selected').attr('data-ys');
    var ym = $('#model').find('option:selected').attr('data-ym');
    var yl = $('#model').find('option:selected').attr('data-yl');
    var yxl = $('#model').find('option:selected').attr('data-yxl');
    var xs = $('#model').find('option:selected').attr('data-xs');
    var s = $('#model').find('option:selected').attr('data-s');
    var m = $('#model').find('option:selected').attr('data-m');
    var l = $('#model').find('option:selected').attr('data-l');
    var xl = $('#model').find('option:selected').attr('data-xl');
    var xxl = $('#model').find('option:selected').attr('data-xxl');
    var xxxl = $('#model').find('option:selected').attr('data-xxxl');
    var xxxxl = $('#model').find('option:selected').attr('data-xxxxl');
    if (yxs != '') {
        $('#yxs').prop('disabled', false);
    }
    else {
        $('#yxs').prop('disabled', true);
    }
    if (ys != '') {
        $('#ys').prop('disabled', false);
    }
    else {
        $('#ys').prop('disabled', true);
    }
    if (ys != '') {
        $('#ym').prop('disabled', false);
    }
    else {
        $('#ym').prop('disabled', true);
    }
    if (ys != '') {
        $('#yl').prop('disabled', false);
    }
    else {
        $('#yl').prop('disabled', true);
    }
    if (ys != '') {
        $('#yxl').prop('disabled', false);
    }
    else {
        $('#yxl').prop('disabled', true);
    }
    if (ys != '') {
        $('#xs').prop('disabled', false);
    }
    else {
        $('#xs').prop('disabled', true);
    }
    if (ys != '') {
        $('#s').prop('disabled', false);
    }
    else {
        $('#s').prop('disabled', true);
    }
    if (ys != '') {
        $('#m').prop('disabled', false);
    }
    else {
        $('#m').prop('disabled', true);
    }
    if (ys != '') {
        $('#l').prop('disabled', false);
    }
    else {
        $('#l').prop('disabled', true);
    }
    if (ys != '') {
        $('#xl').prop('disabled', false);
    }
    else {
        $('#xl').prop('disabled', true);
    }
    if (ys != '') {
        $('#xxl').prop('disabled', false);
    }
    else {
        $('#xxl').prop('disabled', true);
    }
    if (ys != '') {
        $('#xxxl').prop('disabled', false);
    }
    else {
        $('#xxxl').prop('disabled', true);
    }
    if (ys != '') {
        $('#xxxxl').prop('disabled', false);
    }
    else {
        $('#xxxxl').prop('disabled', true);
    }
});

Answer 1

You could try doing it this way:

$('#model').on('change', function(){
    var data = $(this).find('option:selected').data();

    for (var key in data) {            
        $("#" + key).prop("disabled", data[key] == '');            
    }
});

This works by grabbing all data-* attributes on the matched element (option:selected) into an object of the format:

{
    yxs : 'some value',
    ys  : '',
    etc.
}

you can then iterate through this object using the for loop which stores the left side of the object attribute (ie: yxs, ys, etc.) into the key variable. Within the loop you can then grab the corresponding element:

$("#" + key)

and set the disabled property to be true or false based on the evaluation of the expression:

data[key] == ''

which per the object example above would translate to

data['ys'] == '' 

or

data['yxs'] == '' 

etc.

Answer 2

Try

$('#model').on('change', function(){
    var $selcted = $('#model').find('option:selected');

    $('#yxs').prop('disabled', $selcted.data('yxs') == '');
    $('#ys').prop('disabled', $selcted.data('ys') == '');
    $('#ym').prop('disabled', $selcted.data('ym') == '');
    $('#yl').prop('disabled', $selcted.data('yl') == '');
    $('#xs').prop('disabled', $selcted.data('xs') == '');
    $('#s').prop('disabled', $selcted.data('s') == '');
    $('#m').prop('disabled', $selcted.data('m') == '');
    $('#l').prop('disabled', $selcted.data('l') == '');
    $('#xl').prop('disabled', $selcted.data('xl') == '');
    $('#xxl').prop('disabled', $selcted.data('xxl') == '');
    $('#xxxl').prop('disabled', $selcted.data('xxxl') == '');
    $('#xxxxl').prop('disabled', $selcted.data('xxxxl') == '');
    $('#xl').prop('disabled', $selcted.data('xl') == '');
    $('#xl').prop('disabled', $selcted.data('xl') == '');
    $('#xl').prop('disabled', $selcted.data('xl') == '');
});

Another version could be

$('#model').on('change', function(){
    var $selcted = $('#model').find('option:selected');

    function setDisabled(key){
        $('#' + key).prop('disabled', $selcted.data(key) == '');
    }

    setDisabled('yxs');
    setDisabled('ys');
    ....
});