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

时间:2013-08-25 04:43:52

标签: javascript jquery forms

我提出这个问题因为我还在学习javascript。我几乎肯定这不是写这个函数的正确方法,但是它有效。这很难看,但它确实有效。只是从一个脚本看,你能看到一个明显的疏忽,这会使代码更整洁,更具语义性吗?

    $('#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);
    }
});

2 个答案:

答案 0 :(得分:5)

您可以尝试这样做:

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

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

这可以通过将匹配元素(选项:选中)上的所有data- *属性抓取到格式的对象中来实现:

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

然后,您可以使用for循环遍历此对象,该循环将对象属性的左侧(即:yxs,ys等)存储到键变量中。在循环中,您可以获取相应的元素:

$("#" + key)

并根据表达式的评估将disabled属性设置为true或false:

data[key] == ''

根据上面的对象示例将转换为

data['ys'] == '' 

data['yxs'] == '' 

答案 1 :(得分:2)

尝试

$('#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') == '');
});

另一个版本可能是

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

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

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