Disable item if input has value?

Question

I have 2 input. First input with url type. Second input with file type. I want to make disable first input when second has value. The same behavior when second input has value. I tried next code but it don't work correctly. Where is my mistake?

 $("#src").keyup(function(){
        if($('#src').val()){
            $("#src_url").toggleClass("disabled-field");
        }
    });
    $("#src_url").keyup(function(){
        if($('#src_url').val()){
            $("#src").toggleClass("disabled-field");
        }
    });

 .disabled-field{
        pointer-events: none;
        opacity: 0.5;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="src_url" class="form-control" id="src_url" type="url">
    
    <input name="src" id="src" accept=".pdf, .zip, .rar, .doc, .docx, .rtf" type="file">

Solution:

$("#src_url").on("input", function() {
    $("#src").prop("disabled", !!$('#src_url').val());
    $("#src").toggleClass("disabled-field", !!$('#src_url').val());
});

$("#src").on("change", function() {
  $("#src_url").prop("disabled", !!$('#src').val());
    $("#src_url").toggleClass("disabled-field", !!$('#src').val());
});

If you have a solution - add it as an answer - you can answer your own question :) — Taryn East, Feb 02 '18 at 04:37
@TarynEast my final solution based on T.J.Crowder's answer. So I mark his answer as correct and post my working code in question own post. It's only fair. — Nurzhan Nogerbek, Feb 02 '18 at 05:14

T.J. Crowder · Accepted Answer · 2018-02-01T12:46:15.213

3

You're toggling the class when there's a value, so that means on one keyup it'll add the class, on the next keyup it'll remove it, etc. When there's no value, you leave it alone entirely. See: http://api.jquery.com/toggleClass.

You probably wanted to use the two-argument version and no if:

$("#src_url").toggleClass("disabled-field", !!$('#src').val());

Note the !! to turn a truthy/falsy value into true or false.

I will note that the proper way to disable a field is the disabled property, not a class. To use that instead, use prop:

$("#src_url").prop("disabled", !!$('#src').val());

edited Feb 01 '18 at 12:46

answered Feb 01 '18 at 12:30

T.J. Crowder

879,024
165
1,615
1,639

1

Now that's smart, had no idea you could do that. +1 for sure – Andy Holmes Feb 01 '18 at 12:33
Hello, my friend! :) I tested both of your solutions right now but unfortunately they don't work. It seems to me I make something wrong again. Can you check it please: https://jsfiddle.net/NogerbekNurzhan/j0uqmgs2/ My aim: when user enter something to first input I want to disable second input. The same behavior to second input. – Nurzhan Nogerbek Feb 01 '18 at 12:53
@T.J.Crowder I would be extremely grateful if you tell me how to make such trigger. I am really confused. – Nurzhan Nogerbek Feb 01 '18 at 13:12
@NurzhanNogerbek: You were doing it in your answer, I assumed you knew. FWIW, I'd use [`on`](http://api.jquery.com/on/) rather than the shortcut, and I'd probably use the `input` event rather than `keyup`: `$("the-input").on("input", function() { /* ... */});` – T.J. Crowder Feb 01 '18 at 13:16
1

@T.J.Crowder Hello! Thank you very much! Finally I make working trigger for both inputs. For second input which has file type its better to use next code: `$("#src").on("change", function() {/* ... */};` – Nurzhan Nogerbek Feb 02 '18 at 04:01

Disable item if input has value?

1 Answers1