如何在使用jquery键入时删除类

时间:2015-01-23 21:28:22

标签: javascript jquery html css

我想删除禁用提交表单的按钮的类。 我可以在用户开始输入表单时执行此操作吗? 按钮的ID为“add”,类别为“禁用”。

这是html表单

<form id="form" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" action="index.php"  method="post" >
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <label>SlackSpot Name</label>
    <input type="text" class="form-control required" placeholder="Spot Name" name="nome" id="nome">
<label>SlackSpot Description</label>
<textarea class="form-control required" rows="3" name="descrizione" placeholder="Description" id="descrizione"></textarea>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <label>SlackSpot Latitude</label>
    <input type="text" class="form-control required" placeholder="latitude" name="latitudine" id="lat" title="Insert your Spot latitude or live the geolocation value">
<label>SlackSpot Longitude</label>
<input type="text" class="form-control required" placeholder="longitude" name="longitudine" id="lon" title="Insert your Spot longitude or live the geolocation value">
</div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <input class="btn btn-default pull-right disabled" type="submit" value="Add Spot" id="add">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <button type="button" class="btn btn-danger pull-right" id="close">
    <span class="glyphicon glyphicon-remove"> Close</span>
  </button>
</div>

这是我的jquery代码

$("#nome,#lat,#lon").on('keyup', function (e) {
    if ($(this).val().length == 0) {
        $('#add').prop("disabled", true);
    } else {
      $('#add').prop("disabled", false);
    }
})

2 个答案:

答案 0 :(得分:5)

使用按键:

$( document ).ready(function() {
  $('#nome,#lat,#lon').on('keypress',function(){
     if($(this).val().length > 0){
        $('#add').removeClass('disabled');
     }
  });
});

答案 1 :(得分:1)

补充Bhojendra Nepal的回答:

1)“keyup”事件在这里更合适。

2)您可以尝试在提交输入按钮而不是其他类上使用“禁用”属性。它看起来像适合你的情况。

$("#nome,#lat,#lon").on('keyup', function (e) {
    if ($(this).val().length > 0) {
        $('#add').prop("disabled", false);
    }
});

(更新后使用.prop()代替.attr(),这似乎更合适。感谢War10ck指出了这一点!)

小提琴:http://jsfiddle.net/44ewj7hs/2/

编辑:正如@Teemu在评论中所建议的那样,更好的想法是使用input事件(MDN) - 其中一个问题是IE中缺少支持&lt; 9。