在其他输入字段中查找输入值

Question

I need to check and find if a value of the current input field is found in other input fields on the page.

$(document).on("keyup", "input.card-label", function(){

    var ths = $(this),
    par = ths.closest(".inputContainer"),
    val = ths.val();

    if (ths.closest(".allInput").find("input.card-label").val() != val) {
        par.removeClass("dupe");
    } else {
        par.addClass("dupe");
        fle.prop("disabled", true);
    }
});

I seem to have a partial success. When I edit a value that's a duplicate, the "dupe" class is removed, but when I intentionally enter a duplicate value, the "dupe" class is not added. What am I missing?

Answer 1

If I understand correctly, you want a class added when the value of an input is the same as the value of another input. The following code adds the keyup event to any input, then loops over all other inputs to determine if the current input's value is a duplicate, in which case it adds a CSS class.

I have gone for simplicity and just used the input selector. You should be able to tailor this to your needs.

 $(function () { $('input').on('keyup', function (e) { // reference to this input var input = $(e.currentTarget) // get all inputs which are not this input var allInputs = $('input').not(this) // loop through all other inputs for (var i = 0; i < allInputs.length; ++i) { // if another input's value is the same as this, add the class if ($(allInputs[i]).val() == input.val()) { input.addClass('dup') } else { // otherwise remove it (if it exists) input.removeClass('dup') } } }) })

 .dup { border-color: red }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <input type="text" />