Using jQuery to disable input text box type="file"

Question

I am trying to disable a HTML input tag with type="file" which I am using to upload images. I am using the Radio options to indicate Yes or No. If the user clicks no - it should disable the input text box. This is the code I used but I don't know what I have done wrong.

$('#inputattrib').change(function() {
  $('#images').prop('disabled', false);
});
$('#inputattribf').change(function() {
  $('#images').prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-group">
  <p> Indicate Payment Method:</p>
  <input id="inptrue" type="radio" name="pmethod" value="Yes">Yes
  <input id="inpfalse" type="radio" name="pmethod" value="No">No
</div>

<div class="form-group">
  <label for="file">Upload your Payment Evidence: <i>for Bank Deposit only</i></label>
  <input id="images" type="text" name="file" class="form-first-name form-control">
</div>

its type is not file <input id="images" type="text"

Zohaib Ijaz
– Zohaib Ijaz

2016-06-23 20:41:35 +00:00
Commented Jun 23, 2016 at 20:41 — Zohaib Ijaz
– Zohaib Ijaz, Commented Jun 23, 2016 at 20:41
what is #inputattrib?

Rohit
– Rohit

2016-06-23 20:43:17 +00:00
Commented Jun 23, 2016 at 20:43 — Rohit
– Rohit, Commented Jun 23, 2016 at 20:43
@Mohammad You have totally destructed the question dude.

Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman

2016-06-23 20:45:48 +00:00
Commented Jun 23, 2016 at 20:45 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jun 23, 2016 at 20:45

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-23 21:20:17Z

6

The main problem is with the type attribute of <script>. You have type="javascript/text" that's what is not allowing it to work.

On a lighter note, you have used type="text". Did you mean, type="file"?

Make sure that you have assets/js/jquery-1.11.1.min.js in the right position.

Also, there's no elements matching the selector #inputattrib. That's the reason it is not working. You need to use the following:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <title>test</title>
  </head>
  <body>
    <div class="form-group" style="">
      <p> Indicate Payment Method:</p>
      <input id ="inptrue" type="radio" name="pmethod" value="Yes">Yes<br />
      <input id="inpfalse" type="radio" name="pmethod" value="No">No;
    </div>

    <div class="form-group">
      <label for="file">Upload your Payment Evidence: <i>for Bank Deposit only</i></label>
      <input id="images" type="text" name="file" class="form-first-name form-control" />
    </div>  
    <script>
   $('#inptrue').click(function() {
      $('#images').prop('disabled', false);
    });
    $('#inpfalse').click(function() {
      $('#images').prop('disabled', true);
    });
    </script>
  </body>
</html>

Working Output: http://output.jsbin.com/vijinukape

As per the OP, the working code is:

$('[name="pmethod"]').change(function() {
  if ($(this).val() === "Yes")
    $('#images').removeAttr('disabled');
  else
    $('#images').attr('disabled', 'disabled');
});

edited Jun 23, 2016 at 21:20

answered Jun 23, 2016 at 20:43

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3418506 Over a year ago

Hey good one: Its working now perfectly now. Here is the code that helped me answered by someone here: Thanks a great deal for solving my problem: HERE IS THE CODE YOU SENT THAT WORKED: $('[name="pmethod"]').change(function() { if($(this).val()==="Yes") $('#images').removeAttr('disabled'); else $('#images').attr('disabled','disabled'); });

Praveen Kumar Purushothaman Over a year ago

@user3418506 Using prop is better, as you have used already.

Praveen Kumar Purushothaman Over a year ago

@ZakariaAcharki I guess that the OP is using old jQuery. What do you think?

Zakaria Acharki · Accepted Answer · 2016-06-23 21:03:33Z

0

Working fiddle.

Your code is correct you have just to remove the type from script tag or change it to type="text/javascript" instead.

And it will be better if you assign the event by name one time and use value as condition instead of adding two events :

$('[name="pmethod"]').change(function() {
    if($(this).val()=="Yes")
       $('#images').removeAttr('disabled');
    else
       $('#images').attr('disabled','disabled');
});

Hope this helps.

$('[name="pmethod"]').change(function() {
  if($(this).val()==="Yes")
    $('#images').removeAttr('disabled');
  else
    $('#images').attr('disabled','disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="form-group" style="">
  <p> Indicate Payment Method:</p>
  <input id ="inptrue" type="radio" name="pmethod" value="Yes">Yes<b>
  <input id="inpfalse" type="radio" name="pmethod" value="No">No;                       
  </div>
  <div class="form-group">
    <label for="file">Upload your Payment Evidence: <i>for Bank Deposit only</i></label>
    <input id="images" type="text" name="file" class="form-first-name form-control">
  </div>

edited Jun 23, 2016 at 21:03

answered Jun 23, 2016 at 20:46

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

You forgot to tell the type attribute, which is what is one of the main problem, JavaScript didn't execute.

Collectives™ on Stack Overflow

Using jQuery to disable input text box type="file"

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related