jQuery: Помогите повторно активировать кнопку, когда ограничение будет уменьшено

Question

В настоящее время я создал это простое приложение, в котором вы можете добавлять поля ввода с помощью кнопки. Затем, когда достигнутые пределы препятствуют добавлению большего количества, и отображается максимальное сообщение с полем ввода. У вас также есть возможность удалить только что добавленные поля. Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как повторно активировать кнопку добавления, когда пользователь удалил некоторые из полей ввода. Я довольно новичок в jQuery, поэтому, если theres лучший способ написать код, то я все уши. Я воссоздал свой пример в JSfiddle: http://jsfiddle.net/jTh3v/367/.

Как я искал, чтобы сделать это было, когда вы нажали на кнопку удаления, как например:

$("#remove").click(function(e){ 
    $("#MAX").hide('<p>MAX</p>'); 
}); 

Answer 1

Внутри вашего

$("#Input").on("click","#remove", function(e){ 

Для того, чтобы снова включить кнопку добавления вы необходимо:

$("#add").prop("disabled",false); 

Чтобы удалить сообщение MAX вы можете:

$("#MAX p:first").remove(); 

fiddle Обновленный.

Вот фрагмент кода:

$(document).ready(function() { 
 
    var max_fields = 5; 
 
    var x = 1; 
 

 
    $("#add").click(function(e){ 
 
    e.preventDefault(); 
 
    if(x < max_fields){ 
 
     x++; 
 
     $("#Input").append(
 
     '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>' 
 
    ); 
 
    } else if(x == max_fields){ 
 
     $("#MAX").append('<p>MAX</p>'); 
 
     $(this).prop("disabled",true); 
 
    } 
 
    }); 
 

 
    $("#Input").on("click","#remove", function(e){ 
 
    e.preventDefault(); 
 
    x--; 
 
    $("#add").prop("disabled",false); 
 
    $(this).parent('div').remove(); 
 
    $("#MAX p:first").remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="add">Add</button><hr> 
 
<input type="text" name="mytext[]"> 
 
<div id="Input"></div> 
 
<div id="MAX"></div>

Answer 2

Вместо этого:

$("#Input").on("click","#remove", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
    }); 

Попробуйте это:

$("#Input").on("click","#remove", function(e){ 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
    $("#add").prop("disabled",false); 
    $("#MAX").find('p').remove(); 
    }); 

Answer 3

В обработчике событий #remove

$("#Input").on("click", "#remove", function(e) { 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
}); 

добавить следующую строку, чтобы обновить disabled свойство #add:

$('#add').prop('disabled', false); 

Пример:

$("#Input").on("click", "#remove", function(e) { 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
    $('#add').prop('disabled', false); 
    $('#MAX').hide(); 
}); 

Answer 4

Существует способ

$("#Input").on("click","#remove", function(e){ 
    e.preventDefault(); 
    $(this).parent('div').remove(); x--; 
    $('#MAX').html(''); 
    if(x===4){ 
     $('#add').prop('disabled', false); 
    } 
}); 

Сво позволяет добавить кнопку один раз, когда вы удалили свой пятый элемент.

Вот jsfiddle

Answer 5

Вы должны проверить, если предел больше, чем число в поле ввода при удалении одного из них.

$(document).ready(function() { 
    var max_fields = 5; 
    var x = 1; 

    $("#add").click(function(e){ 
    e.preventDefault(); 
    if(x < max_fields){ 
     x++; 
     $("#Input").append(
     '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>' 
    ); 
    }else if(x == max_fields){ 
     $("#MAX").append('<p>MAX</p>'); 
     $(this).prop("disabled",true); 
    } 
    }); 

    $("#Input").on("click","#remove", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--; 

    if(x < max_fields){ //here you check if lower than limit 
     $('#add').prop("disabled", false); 
     $("#MAX").html(''); //deleting the content of max 
    } 

    }); 
}); 

Here is the jsfiddle example

Answer 6

Для того, чтобы повторно включить кнопку добавить, добавить $('#add').prop('disabled', false); в обработчик событий удалить click.

Кроме того, для отображения MAX, я бы рекомендовал положить <p>Max</p> в HTML, и настройки #MAX дел до style="display:none;", а затем с помощью $('#MAX').show() и $('#MAX').hide() для отображения индикатора MAX. Если вы будете следовать моим указаниям и добавить код выше, чтобы повторно включить кнопку добавления, вы поймете, почему:

1. индикатор MAX остается на странице после того, как кнопка повторно включена
2. После того, как вы повторно -enable кнопку добавления, а затем нажмите ее еще раз, пока вы не достигнете максимального количества полей во второй раз, добавьте <p>MAX</p> к div, создавая повторяющиеся индикаторы.