使用Jquery禁用输入文本框type = file

时间:2016-06-23 20:38:17

标签: javascript jquery html

我正在尝试使用type="file"禁用html输入标记,我用它来上传图像。我使用Radio选项指示Yes或No.如果用户单击no - 它应该禁用输入文本框。这是我使用的代码,但我不知道我做错了什么。

<html>
 <head>
 <title>test</title>
 <script src="assets/js/jquery-1.11.1.min.js"></script>

 </head>
 <body>
  <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>  

  <script type="javascript/text">

    $('#inputattrib').change(function() {
       $('#images').prop('disabled', false);
    });
    $('#inputattribf').change(function() {
      $('#images').prop('disabled', true);
    });
  </script>
 </body>
</html> 

2 个答案:

答案 0 :(得分:1)

主要问题type属性为<script>。你有type="javascript/text"这是不允许它工作的。

在较轻松的说明中,您使用了type="text"。你的意思是,type="file"

确保assets/js/jquery-1.11.1.min.js位于正确的位置。

此外,没有与选择器#inputattrib匹配的元素。这就是它不起作用的原因。您需要使用以下内容:

<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> 

工作输出:http://output.jsbin.com/vijinukape

根据OP,工作代码是:

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

答案 1 :(得分:0)

<强> Working fiddle

您的代码是正确的,您只需从脚本标记中删除type或将其更改为type="text/javascript"

如果您按名称分配事件一次并使用值作为条件而不是添加两个事件,那将会更好:

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

希望这有帮助。

&#13;
&#13;
$('[name="pmethod"]').change(function() {
  if($(this).val()==="Yes")
    $('#images').removeAttr('disabled');
  else
    $('#images').attr('disabled','disabled');
});
&#13;
<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>
&#13;
&#13;
&#13;

相关问题