禁用选项选择JavaScript

Question

I Have a problem, I want to enable/show options, if that option has the same name with "ColumnCode" and "IsRow" is true. Other than that, the option is disabled/ hidden.

I tried the code below, but it didn't work.

var model = {
    Rows: $('#Rows')
};


var columns = 
[{"ColumnCode":"CollateralType","IsRow":true},
{"ColumnCode":"CollectorUnit","IsRow":true}];

_.each(columns, function (col) {
    model.Rows.find('option').each(function () {                       
        if (this.value != col['ColumnCode'] || (this.value == col['ColumnCode'] && !col['IsRow']))
            $(this).attr('disabled', true);
    });
});  

This is the select element :

<select name="Rows[]" id="Rows">
    <option value="AccountNo">Account No</option>
    <option value="CollateralType">Collateral Type</option>  
</select>

Can someone please guide?

Answer 1

You should turn that loop inside out and iterate through the options first and then the array as otherwise your options will get constantly re-set or could end up all disabled all the time.

You also might want to add a default option similar to <option value="none">...please select</option> value to ensure nothing is getting selected in case all are disabled.

var model = {
    Rows: $('#Values') // had to change this from #Row for demo to work
};

var columns = [
    {"ColumnCode": "CollateralType", "IsRow": true},  // change this to see different results
    {"ColumnCode": "CollectorUnit",  "IsRow": true}
];

// enable option if option has the same name as "ColumnCode" and "IsRow" is true
model.Rows.find('option').each(function (index, option) {
    var matchFound = false;
    var isRow = false;

    _.each(columns, function (col) {
        if (option.value == col['ColumnCode']) {
            matchFound = true;
            isRow = col['IsRow']
            return false;
        }
    });

    if(matchFound && !isRow || !matchFound){
        $(this).attr('disabled', true); //jQuery pre 1.6
        //$(this).prop('disabled', true); // jQuery v1.6 or later
    }
});

If you have this happening dynamically and need to reset all disabled attributes, simply do model.Rows.find('option').removeAttr('disabled') or if you are using jQuery 1.6 or later use model.Rows.find('option').prop('disabled', false) before you start the loops.

---

DEMO - Only enable options which are in the list and have isRow set to true

---