单击链接时，检查文本字段是否包含文本

Check that text field has text when clicking a link

本文关键字：文本 字段 包含 是否 检查 链接 单击      更新时间：2023-09-26

(希望问题的标题有意义 - 不太确定如何措辞(。

我一直在使用某个脚本来确保启用"继续/提交"按钮，只要至少有一个文本字段(都具有相同的类(具有值。 这是该脚本(.donation 对应于文本字段，.continue 是提交按钮(：

var inputs = $('.donation').on('keyup', function() {
    $('.continue').prop('disabled', !(this.value.length || inputs.filter(function() {
        return $.trim(this.value).length > 0;
    }).length));
});

这很好用，但是我已经为用户创建了能够使用以下代码删除文本字段的选项。单击带有类 .dr 的链接时，它会从页面中删除文本字段：

<a href="#" class="dr" title="Remove" onClick="return false;"><span class="glyphicon glyphicon-remove-circle"></span></a>
$(".dr").live("click", function (){
    $(this).parent().parent().fadeOut( 1000, function() { 
        $(this).remove();
    });
});

问题：我可以在文本字段中输入一个值，然后按预期激活提交按钮。但是，如果我随后使用链接删除该文本字段，则提交按钮不会禁用 - 它仍然处于启用状态。

我知道这是因为第一个脚本正在 .donation 字段中查找 keyup 函数，当我删除该字段时，它显然没有调用它。

那么我该如何修复它，以便当我单击链接时，它会检查文本字段的值呢？

我尝试创建一个在单击 .dr 时调用的函数：

function checkDonation() {
    if ( inputs.val().length == 0 ) {
        $('.continue').prop('disabled', true);
    }
}
但是，它只检查第一个文本字段

是否为空，并且它似乎破坏了第一个脚本，因为当我输入字符时它不再检查文本字段的值。

希望这是有道理的，并且您了解我的问题。我仍然对Javascript和Jquery很陌生。谢谢你的时间！

JSFiddle： http://jsfiddle.net/1c5r5Lef/

这是使用事件委托和"value！=""选择器的好例子。你可以在这里看到它 http://jsfiddle.net/cec9ybyx/

活动委托：

$( window ).on( 'keyup' , function( e )  {
    var target = $( e.target );
    if( target.is( '.donation' ) )
        toggleButton();    
});
$( window ).on( 'click' , function( e )  {
    var target = $( e.target );
    if( target.is( '.remove' ) )
        removeInput( e.target );
    else if( target.is( '#add' ) )
        addInput();
});

删除操作：

function removeInput( obj ){
    $( obj ).parent().remove();
    toggleButton();
}

切换操作：

function toggleButton(){
    button.prop( 'disabled' , $( 'input.donation[value!=""]' ).length == 0 );
}

这可能有效。 尝试在删除元素时触发 Key Up 事件

$(".dr").on("click", function (){
    $(this).parent().parent().fadeOut( 1000, function() { 
        $(this).remove();
        $('.donation').trigger('keyup')
    });
});

我认为您的检查捐赠方法是一个很好的方法，您可以在删除元素后调用它。但是，您需要检查所有输入以查看是否有捐赠。我已经修补了一些方法：

function checkDonation() {
    $('.continue').prop('disabled', true);
    $("input").each(function () {
        if ($(this).val().length !== 0) {
            console.log("One is not empty, reactivating.");
            $('.continue').prop('disabled', false);
            return false;
        }
    });
}

调用此方法意味着检查所有输入(也许您可以使用类而不是输入来限制搜索，并且不包括页面可能具有的其他输入(。首先，我们禁用继续按钮。如果任何输入包含值，我们重新启用它并立即返回(我们不需要继续搜索，一个就足够了(。

希望对您有所帮助。

你在这里有几个问题。

您的HTML标记具有共享同一id的各种元素，这是无效的。如果要以相同的方式操作所有这些class，请改用它们。

您正在使用自 v1.3 起已弃用的.live()，自 jQuery 的 v1.7 起已被删除。请改用.on()。

这就是我会这样做的方式： 

$(function() {
  // Check when page is loaded.
  checkInputs();
  function checkInputs() {
    var disabled = true;
    // If any input has a value, don't disable the button.
    $('.donation').each(function() {
      if ($(this).val()) {
        disabled = false;
      }
    });
    $('.continue').prop('disabled', disabled);
  }
  // On typing the text, check the inputs.
  $(document).on('keyup', '.donation', checkInputs);
  $(document).on('click', '.dr', function() {
    // Remove the row.
    $(this).parents('.cart-row').fadeOut(1000, function() {
      $(this).remove();
      // Check the inputs.
      checkInputs();
    });
  });
});
.cart-row {
  overflow: auto;
  border-bottom: 1px solid #f5f5f5;
  padding-top: 10px;
  padding-bottom: 5px;
  width: 95%;
  margin: auto auto;
}
.form-left {
  width: 20%;
  position: relative;
  float: left;
  margin-right: 5%;
}
.form-name {
  padding-top: 5px;
  float: left;
  position: relative;
  width: 70%;
}
.form-remove {
  padding-top: 5px;
  float: left;
  position: relative;
  width: 5%;
  color: #b30f16;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <div class="cart-row">
    <div class="form-left">
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" id="fhaf" name="" class="donation form-control" placeholder="0.00" maxlength="15" />
      </div>
    </div>
    <div class="form-name">Item 1</div>
    <div class="form-remove">
      <a href="#" class="dr" title="Remove Fund">REMOVE</a>
    </div>
  </div>
  <div class="cart-row">
    <div class="form-left">
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" id="fmf" name="" class="donation form-control" placeholder="0.00" maxlength="15" />
      </div>
    </div>
    <div class="form-name">Item 2</div>
    <div class="form-remove">
      <a href="#" class="dr" id="donation" title="Remove Fund">REMOVE</a>
    </div>
  </div>
  <div class="cart-row">
    <div class="form-left">
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" id="fpef" name="" class="donation form-control" placeholder="0.00" maxlength="15" />
      </div>
    </div>
    <div class="form-name">Item 3</div>
    <div class="form-remove">
      <a href="#" class="dr" title="Remove Fund">REMOVE</a>
    </div>
  </div>
  <br />
  <br />
  <input type="submit" class="continue btn btn-primary" onClick="return false;" disabled="disabled" value="Continue »" />
</form>

演示 js小提琴

相关文章：