CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bumbumpaw
bumbumpaw

Reputation: 2528

Disable changing of border-color with given class

If add "Orange" before "Orange" that is readonly. The input that will have red borderline is the input that is read-only w/c is wrong. I dont want the read-only input(supposedly from database to be mark as duplicate or to have red borderline)

Current output: 

Apple [read-only]
Orange // *added by user*
Orange[read-only] //borderline changed to red when button save is clicked

Wanted output: 

Apple [read-only]
Orange // *added by user* and borderline changed to red when button save is clicked
Orange[read-only]

See this FIDDLE for demo and try to click add row button before the row with "Orange" value input field with another "Orange" value of input.

$("#save").off("click").on("click",function(){
    var existing = [];
    var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
        var value = $(this).val();
        if (existing.indexOf(value) >= 0) {
            return $(this);
        }
        existing.push(value);
    });
    duplicates.closest('tr').css('background-color', 'red');
});

I tried this :

duplicates.closest('#myTable td:nth-child(3) input:not(readOnlyText)').css('background-color', 'red');

but nothing change.

Upvotes: 1

Views: 150

Answers (1)

Vivek Kumar Bansal
Vivek Kumar Bansal

Reputation: 246

This is bound to happen as per your code. You need to differentiate between rows added by user from already existing ones. You can use readonly attribute to rows added by user and then apply your filter.

$("#save").off("click").on("click",function(){
    var existing = [];
    $('#myTable td:nth-child(3) input').filter(function() {
        var value = $(this).val();
        if ($(this).attr('readonly')) {
            existing.push(value);
         }
    });
    var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
        var value = $(this).val();
        if (existing.indexOf(value) > -1 && !$(this).attr('readonly')) {
            return $(this);
        }
    });
    duplicates.closest('tr').css('background-color', 'red');
});

Upvotes: 1

Related Questions