Question

我有10个带有禁用属性的输入列表

<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

当我单击“编辑”按钮时，我想删除已禁用的属性和警报类，以便输入与该按钮相同的行。我试过这样的

$('form.rule-form').find('button.rule-btn').each(function(){
    $(this).click(function(){

        $(this).text('Submit');

        $('form.rule-form').find('input[name="rule"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-info');
        });

        $('form.rule-form').find('input[name="point"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-success');
        });

        $(this).click(function(){
            $('form.rule-form').submit();
        })
    });
});

但是在点击“编辑”按钮后，似乎所有输入列表都已启用。

Answer 1

问题是因为您需要使用DOM遍历来查找与单击按钮行相关的input元素。为此，您可以结合使用closest()和find()。

另请注意，在第二次单击按钮时提交表单的更简单方法是将类型更改为HTML中的submit，然后在第一次单击时使用preventDefault()来停止提交。试试这个：

＆＃13;

$('form.rule-form button.rule-btn').click(function(e) {
  var $btn = $(this);
  if ($btn.text() !== 'Submit') {
    e.preventDefault();
    $btn.text('Submit');
    $btn.closest('.form-row').find('input')
      .prop('disabled', false)
      .removeClass('alert-info alert-success');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="10" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="1" data-poin="10">Edit</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="20" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="2" data-poin="20">Edit</button>
    </div>
  </div>
</form>

＆＃13;

Answer 2

看起来您无法在$(this)下找到您的元素，因此浏览DOM层次结构会有所帮助：

$('button').click(function(){
    $(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
    $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
});

Answer 3

此查找输入并启用clikcing编辑按钮如果单击编辑按钮文本将在下次单击时更改为提交它检查是否提交按钮文本如果提交它将提交表单。

# get the original data using the original index
X_train_ordered = X_train.loc[X_train_1.index].append(
    # get all new data by looking for indexes not in original data
    X_train.loc[~X_train.index.isin(X_train_1.index)])

$(function() {$('.rule-btn').click(function(){
if(alreadyClicked)
  {
    
  $(this).attr('type','submit');
   return;
  }
$(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
   $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
   $(this).attr('id','submit');
   $(this).text("submit");
   alreadyClicked = true;
   console.log($(this).attr('class'));
});
var alreadyClicked = false;
});

Answer 4

尝试找到兄弟姐妹并更改属性值。

$(this).parent().siblings().find(".form-group").removeAttr("disabled");

同样可以删除课程。

Answer 5

$('.rule-btn').click(function(){
   $('input[name="rule"]', $(this).closest('.form-row')).each(function(){
     $(this).prop('disabled', false).toggleClass('alert-info');
 })
 $('input[name="point"]', $(this).closest('.form-row')).each(function(){
   $(this).prop('disabled', false).toggleClass('alert-success');
  })
})

你可以简单地做传递parent和find元素，你可以用元素

做任何事情

如何通过单击按钮启用特定输入

5 个答案: