CODEWITHSUNDEEP
javascriptjqueryhtml
user3418506
user3418506

Reputation: 41

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

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>

Upvotes: 0

Views: 13849

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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');
});

Upvotes: 6

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 0

Related Questions