僅在完成某件事后才使按鈕可點擊

Question

我想要一個僅在將一個框的所有選項移到另一個框時才能按下的按鈕。

看到界面的截圖在這里：

接口

因此將藍色框中的所有選項都拖動到綠色框中，然后該按鈕變為活動狀態。 這可能嗎？

我的代碼：

 $(document).ready(function(){ $('.next').click(function() { $('.current').removeClass('current').hide() .next().show().addClass('current'); if ($('.current').hasClass('last')) { $('#next').attr('disabled', true); } $('#prev').attr('disabled', null); }); }); $(document).ready(function(){ $( function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable, .connectedSortable1" }).disableSelection(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <div id='div2' class='dropboxes'> <!--box with options to drag to the other box--> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default" style="cursor:move;" id='I'>option1</li> <li class="ui-state-default" style="cursor:move;" id='D'>option2</li> <li class="ui-state-default" style="cursor:move;" id='C'>option3</li> <li class="ui-state-default" style="cursor:move;" id='S'>option4</li> </ul> <!--other box where the options above can be dropped--> <ul id="sortable2" class="connectedSortable1"> </ul> <!--this button has to be only clickable when all the options are dragged to the other box--> <button class="next">Volgende</button> </div> 

我怎樣才能做到這一點 ？

Answer 1

您可以使用.sort事件進行排序。 請檢查代碼段以了解更多信息。

 $(document).ready(function(){ $('.next').click(function() { $('.current').removeClass('current').hide() .next().show().addClass('current'); if ($('.current').hasClass('last')) { $('#next').attr('disabled', true); } $('#prev').attr('disabled', null); }); }); $(document).ready(function(){ $( function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable, .connectedSortable1", stop: function( ) { if($("#sortable1 li").length > 0){ $(".next").prop("disabled",true); }else{ $(".next").prop("disabled",false); } } }).disableSelection(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <div id='div2' class='dropboxes'> <!--box with options to drag to the other box--> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default" style="cursor:move;" id='I'>option1</li> <li class="ui-state-default" style="cursor:move;" id='D'>option2</li> <li class="ui-state-default" style="cursor:move;" id='C'>option3</li> <li class="ui-state-default" style="cursor:move;" id='S'>option4</li> </ul> <!--other box where the options above can be dropped--> <ul id="sortable2" class="connectedSortable1"> Drag Here </ul> <!--this button has to be only clickable when all the options are dragged to the other box--> <button disabled="disabled" class="next">Volgende</button> </div> 

Answer 2

可以使用其HTML disabled屬性禁用和啟用按鈕

<button id="nextBtn" disabled="true">Disabled</button>

通過訪問DOM事件和可移動項，您可以檢查何時將對象拖到上方。 全部移動后，請更改按鈕的Disabled屬性。

document.getElementById('nextBtn').disabled = false;

Answer 3

這是一種可能的方式

如果您具有預定義數量的選項，則可以使用計數器，前提是應確保不會兩次單擊同一選項，然后在按鈕單擊功能中檢查計數器值。

例如。 5個選項的計數器值應為5

如果計數器== 5

執行按鈕點擊

Answer 4

使用contentChanged事件偵聽器是可能的。 由於您已經在使用jQuery，這可能會有所幫助。

$('#sortable2').on('contentChanged', function(){
    if($(this).children().length == 4)
        $('.next').attr('disabled', false);
});

這段代碼正在檢查右側列表上的內容是否已更改，如果已更改，我們正在檢查當前列表項的數量是否為4，並通過將按鈕的屬性disabled設置為false來啟用按鈕。 如果您不知道左側的項目數，請在計算右側的項目時預先計算並將其傳遞給回叫。