Question

（希望问题的标题有意义 - 不太确定如何说出这个问题）。

我一直在使用某个脚本来确保启用CONTINUE / SUBMIT按钮，只要至少一个文本字段（所有具有相同类别）都具有它的价值。这是脚本（.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/

Answer 1

这可能有用。在删除元素

时尝试触发按键事件

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

Answer 2

使用事件委派是一个很好的例子，而且值很高！=＆＃34;＆＃34;＆＃39;选择。你可以在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 );
}

Answer 3

我认为你的checkDonation方法是一种很好的方法，你可以在删除元素后调用它。但是，您需要检查所有输入，以查看是否有捐款。我修改了一下方法：

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;
        }
    });
}

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

希望它有所帮助。

Answer 4

这里有一些问题。

您的HTML标记包含共享相同id的各种元素，这些元素无效。如果您想以相同的方式操纵所有这些，请使用class。

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

我将如何做到这一点：

＆＃13;

$(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();
    });
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Demo jsFiddle

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

4 个答案: