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

我想通過相應的“禁用”按鈕禁用特定的表單組輸入。 我知道腳本中的問題，但是如何解決它。

您不能像以下那樣為新創建的表單組附加點擊事件：

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

必須像在此行中一樣委派此事件：

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

此外，ID必須是唯一的，不要對多個元素使用相同的id。 例如，您可以考慮將ID價格更改為類。

當您單擊“禁用”按鈕時，您只需要找到相關的輸入：

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