Отключить изменение цвета границы с заданным классом

Question

Если добавить «Оранжевый» до «Оранжевый», то есть readonly. input, который будет иметь красную границу, равен input, который доступен только для чтения w/c. Я не хочу, чтобы read-only input (предположительно из базы данных будет пометить как дублировать или иметь красную границу)

Токовый выход:

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

Wanted выход:

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

Смотреть это FIDDLE for demo и попробуйте нажать кнопку строки строки перед строкой с полем ввода значения «Оранжевый» с другим значением «Оранжевый» ввода.

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

Я попытался это:

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

но изменить ничего.

Answer 1

Это обязательно произойдет в соответствии с вашим кодом. Вам нужно различать строки, добавленные пользователем из уже существующих. Вы можете использовать атрибут readonly для строк, добавленных пользователем, а затем применить свой фильтр.

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