javascript - 通过javascript禁用表单组输入

Question

我在 jsp 中有一个表单，其中菜名、菜品成分、价格的输入字段、禁用输入字段的按钮和添加新菜单的加号按钮，如下所示:

JSP:

<form id="menuForm" method="post" class="field_wrapper form-horizontal" action="anotherMenu.jsp"> 
   <div class="menu_item">
       <div class="form-group">
            <label class="col-sm-1 control-label">Menu</label> 
            <div class="col-sm-2">
                 <input type="text" id="dishname" class="form-control" name="dishname[0]" placeholder="Enter dish name"/>
            </div>  
            <div class="col-sm-4">
                 <input type="text" id="ingredient" class="form-control" name="ingredient[0]" placeholder="Dish ingredients"/>
            </div>
            <i class="col-sm-1 control-label fa fa-inr"></i>
            <div class="col-sm-1">
                 <input type="number" id="price" class="form-control" name="price[0]" placeholder="Rs. /-" pattern="[0-9]*"/>
            </div>
            <div class="col-sm-1">
                 <button type="button" class="activate btn btn-default">Disable</button>
            </div>
            <div class="col-sm-1">
                 <button type="button" class="btn btn-default addButton" id="addInput"><i class="fa fa-plus"></i></button>
            </div>
       </div>
   </div>
       <div class="form-group">
           <div class="col-sm-4 col-sm-offset-1">
                <button type="submit" class="btn btn-default">Submit</button>
           </div>
       </div>

脚本:

   <script>
            $(document).ready(function() {
                (function ($) {
                    $.fn.toggleDisabled = function() {
                        return this.each(function () {
                            var $this = $(this);
                            if($this.attr('disabled')) {
                               $this.removeAttr('disabled');
                            }
                            else { 
                               $('.activate').text("Active");
                               $this.attr('disabled', 'disabled'); 
                            }
                        });
                    };
                })(jQuery);
                $(function() {
                    $('.activate').click(function() {
                        $('.activate').text("Disable");
                        $('input:text').toggleDisabled();
                        $('#price').toggleDisabled();
                    });
                });

                var max_field = 10, //validate for maximum input field
                    wrapper = $(".field_wrapper"),
                    add_button = $(".addButton"),                
                    x = 1, //used to increase the input field.
                    index = 0;  //used to increment the 'name' for the input

                //Add button click handler    
                $(add_button).on('click', function (e) {
                    e.preventDefault();
                    if(x < max_field) {
                        x++;
                        index++;  
                        var fieldHTML = '<div class="form-group removeGroup">\n'
                                  +'<label class="col-sm-1 control-label">Menu</label>\n' 
                                  +'<div class="col-sm-2">\n'
                                       +'<input type="text" id="dishname" class="form-control" name="dishname[' + index + ']" placeholder="Enter dish name"/>\n'
                                  +'</div>\n'  
                                  +'<div class="col-sm-4">\n'
                                      +'<input type="text" id="ingredient" class="form-control" name="ingredient[' + index + ']" placeholder="Dish ingredients"/>\n'
                                  +'</div>\n'
                                  +'<i class="col-sm-1 control-label fa fa-inr"></i>\n'
                                  +'<div class="col-sm-1">\n'
                                      +'<input type="text" id="price" class="form-control" name="price[' + index + ']" placeholder="Rs. /-"/>\n'
                                  +'</div>\n'
                                  +'<div class="col-sm-1">\n'
                                      +'<button type="button" class="activate btn btn-default" id="active">Disable</button>\n'
                                  +'</div>\n'
                                  +'<div class="col-sm-1">\n'
                                      +'<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>\n'
                                  +'</div>\n'
                                +'</div>';

                        var currentEntry = $(this).parents('.menu_item:first');
                        $(fieldHTML).appendTo(currentEntry);
                    }
                });                

                //Remove button click handler
                $(wrapper).on('click', '.removeButton', function(e) {
                    e.preventDefault();
                    $(this).closest('.removeGroup').remove();
                    x--;
                });                
            });
        </script>

问题: 当我点击第一个 Disable 按钮时，所有来自禁用的输入如下图所示:

我想通过相应的“禁用”按钮禁用特定的表单组输入。我知道脚本中的问题，但如何解决它。请帮忙。

谢谢!

Answer 1

I want to disable particular form-group inputs by corresponding 'Disable' buttons. I know the problem in the script, but how to solve it.

您不能像现在这样为新创建的表单组附加点击事件:

$('.activate').click(function() {

此事件必须像您在这一行中所做的那样被委托(delegate):

$(wrapper).on('click', '.removeButton', function(e) {

此外，ID必须是唯一的，不要对多个元素使用相同的ID。例如，您可能会考虑将 id price 更改为 class。

当您点击“禁用”按钮时，您只需要找到相关的输入:

$(this).closest('div.form-group').find('#price, input:text')

必须重写您的 toggleDisabled 扩展方法。

我的代码:

$.fn.toggleDisabled = function(obj) {
  var newState = false;
  if (obj.textContent == 'Disable') {
    obj.textContent = 'Active';
    newState = true;
  } else {
    obj.textContent = 'Disable';
  }
  return this.each(function (index, element) {
    element.disabled = newState;
  });
};


$(document).ready(function() {
  
  // 
  // this is the new event delegated handler
  //
  $('.field_wrapper').on('click', '.activate', function(e) {
    $(this).closest('div.form-group').find('#price, input:text').toggleDisabled(this);
  });

  
  
  var max_field = 10, //validate for maximum input field
      wrapper = $(".field_wrapper"),
      add_button = $(".addButton"),
      x = 1, //used to increase the input field.
      index = 0;  //used to increment the 'name' for the input

  //Add button click handler
  $(add_button).on('click', function (e) {
    e.preventDefault();
    if(x < max_field) {
      x++;
      index++;
      var fieldHTML = '<div class="form-group removeGroup">\n'
      +'<label class="col-sm-1 control-label">Menu</label>\n'
      +'<div class="col-sm-2">\n'
      +'<input type="text" id="dishname" class="form-control" name="dishname[' + index + ']" placeholder="Enter dish name"/>\n'
      +'</div>\n'
      +'<div class="col-sm-4">\n'
      +'<input type="text" id="ingredient" class="form-control" name="ingredient[' + index + ']" placeholder="Dish ingredients"/>\n'
      +'</div>\n'
      +'<i class="col-sm-1 control-label fa fa-inr"></i>\n'
      +'<div class="col-sm-1">\n'
      +'<input type="text" id="price" class="form-control" name="price[' + index + ']" placeholder="Rs. /-"/>\n'
      +'</div>\n'
      +'<div class="col-sm-1">\n'
      +'<button type="button" class="activate btn btn-default" id="active">Disable</button>\n'
      +'</div>\n'
      +'<div class="col-sm-1">\n'
      +'<button type="button" class="btn btn-default removeButton"><i class="glyphicon glyphicon-minus"></i></button>\n'
      +'</div>\n'
      +'</div>';

      var currentEntry = $(this).parents('.menu_item:first');
      $(fieldHTML).appendTo(currentEntry);
    }
  });

  //Remove button click handler
  $(wrapper).on('click', '.removeButton', function(e) {
    e.preventDefault();
    $(this).closest('.removeGroup').remove();
    x--;
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form id="menuForm" method="post" class="field_wrapper form-horizontal" action="anotherMenu.jsp">
    <div class="menu_item">
        <div class="form-group">
            <label class="col-sm-1 control-label">Menu</label>
            <div class="col-sm-2">
                <input type="text" id="dishname" class="form-control" name="dishname[0]" placeholder="Enter dish name"/>
            </div>
            <div class="col-sm-4">
                <input type="text" id="ingredient" class="form-control" name="ingredient[0]" placeholder="Dish ingredients"/>
            </div>
            <i class="col-sm-1 control-label fa fa-inr"></i>
            <div class="col-sm-1">
                <input type="number" id="price" class="form-control" name="price[0]" placeholder="Rs. /-" pattern="[0-9]*"/>
            </div>
            <div class="col-sm-1">
                <button type="button" class="activate btn btn-default">Disable</button>
            </div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-default addButton" id="addInput"><i class="glyphicon glyphicon-plus"></i></button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-1">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>