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=".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>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./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 Commented Jun 23, 2016 at 20:41 -
what is
#inputattrib? – Rohit Commented Jun 23, 2016 at 20:43 - @Mohammad You have totally destructed the question dude. – Praveen Kumar Purushothaman Commented Jun 23, 2016 at 20:45
2 Answers
Reset to default 6The 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./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./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');
});
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn./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>