2015-11-04 5 views
1

У меня есть две кнопки. Один, где я клонировал div (button-add) и один, где я удаляю div (кнопка-remove).Отключить кнопку, если только один div

Я хочу отключить кнопку удаления, когда у меня есть только один div.

Так что для нескольких див, это выглядит следующим образом:

<button type="button" class="btn btn-default btn-lg button-add">+1</button> 
<button type="button" class="btn btn-default btn-lg button-remove">-1</button> 
<div class="copybox"></div> 
<div class="copybox"></div> 
<div class="copybox"></div> 

... и когда есть только один DIV, я хочу, чтобы выглядеть следующим образом:

<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button> 
<div class="copybox"></div> 

Я использую JQuery 1,11 .3

+2

'$ («div.copybox») .length' дает вам счетчик div. – DontVoteMeDown

+1

'$ (". Button-remove "). Prop (" disabled ", $ (" div.copybox "). Length <= 1)' – epascarello

+0

@epascarello, что один отлично работал. Только проблема заключается в том, что он не обновляется, когда я нажимаю кнопку добавления (так что функция отключения работает только один раз). Я думаю, что это имеет какое-то отношение к «on» (http://api.jquery.com/on/), но я не могу понять, как ... – daxro

ответ

0

Здесь вы идете. Надеюсь, это то, что вам нужно.

$('.btn').on('click',function(){ 
 
    if($(this).text()=="+1") 
 
    { 
 
    $('.button-remove').prop('disabled',false); 
 
    $('div.copybox:first').clone().appendTo('body'); 
 
    } 
 
    else 
 
    { 
 
    $('div.copybox:last').remove();  
 
    } 
 
    $('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false) 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-default btn-lg button-add">+1</button> 
 
<button type="button" class="btn btn-default btn-lg button-remove">-1</button> 
 
<div class="copybox">Copy</div> 
 
<div class="copybox">Copy</div> 
 
<div class="copybox">Copy</div>

+1

И как он включается? – epascarello

+1

Также это должно быть свойство, а не атрибут. http://api.jquery.com/prop/ – epascarello

+0

@epascarello .. Yep .. спасибо за указание .. Добавлены изменения .. :) –

0

Попробуйте использовать $("div.copybox").length что DontVoteMeDown комментировал, а затем установить идентификатор для кнопки Удалить. Как только вы это сделаете, вы можете добавить функцию, чтобы скрыть эту кнопку с помощью этого кода.

document.getElementById(buttonID).style.display = 'none'

Если позже вы решите включить его снова, то вы можете также добавить еще, если заявление, а затем код, который будет block вместо none

Смежные вопросы