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

0g0grzrc 于 2022-11-26 发布在 jQuery

关注(0)|答案(3)|浏览(127)

我想删除禁用提交表单按钮的类。我可以在用户开始在表单中键入时执行此操作吗？按钮的id为"add"，类为"disabled"。
这是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);
    }
})

css

来源：https://stackoverflow.com/questions/28119001/how-to-remove-a-class-while-typing-using-jquery

3条答案

按热度按时间

rryofs0p1#

使用按键：

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

赞(0）回复(0）举报 2022-11-26

8aqjt8rx2#

补充Bhojendra Nepal的回答：
1)“keyup”事件更适合此处。
2)您可以尝试在提交输入按钮上使用“disabled”属性而不是另一个类。它看起来很适合您的情况。

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

（更新为使用.prop()而不是.attr()，这似乎更合适。感谢war 10 ck指出这一点！）
小提琴：http://jsfiddle.net/44ewj7hs/2/
编辑：正如@Teemu在评论中建议的那样，更好的主意是使用input事件（MDN）--一个问题是IE〈9中缺乏支持。

赞(0）回复(0）举报 2022-11-26

tvz2xvvm3#

我的jQuery代码升级了。我希望按钮被禁用，直到“nome”、“lon”和“lat”字段都为空。当然，按钮必须填充所有字段才能激活;如果只完成了“name“和“lon“而没有完成“lat“，则按钮仍然不活动。

赞(0）回复(0）举报 2022-11-26