【发布时间】：2016-08-26 20:47:48
【问题描述】：
我在 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 按钮时，所有输入都禁用，如下图所示：
我想通过相应的“禁用”按钮禁用特定的表单组输入。我知道脚本中的问题，但是如何解决它。请帮忙。
谢谢！
【问题讨论】：
标签： javascript jquery html forms jsp