2013-10-30 102 views
0

我有2個按鈕添加和分組。最初羣組按鈕被隱藏。添加按鈕用於創建記錄。如果超過1個複選框被選中,如何顯示隱藏按鈕

例如: 創建5條記錄時(按5次添加按鈕)。現在,如果用戶選擇超過 checkbox,則應出現隱藏組按鈕。請問任何人都可以告訴我該怎麼做?

請參閱本fiddle

我使用bootstrap css和隱藏我一樣

<input type="button" id="btn2" class="btn btn-lg btn-primary hide" value="Group"> 

更新,如果用戶輸入一些記錄 檢查框纔會出現。填寫表格並按下添加按鈕後

+0

,我們在您的jsfiddle例如沒有複選框? –

+0

@RoryMcCrossan你需要輸入一些記錄,然後只會出現複選框,輸入姓名,電子郵件和號碼,按添加按鈕 – SpringLearner

+0

超過(5?)複選框? – Twocode

回答

4

看到這個FIDDLE

$(document).on('change','#mytable input:checkbox',function() { 
    if($('#mytable input:checkbox:checked').length > 1) { 
     $('#btn2').removeClass('hide') 
    } 
    else { 
     $('#btn2').addClass('hide') 
    } 
}); 
1

change事件添加一張支票的複選框。下面fiddle和示例:

$(document).on('change','#mytable input:checkbox',function() { 
    if(!this.checked) 
    { 
     key=$(this).attr('name').replace('mytr',''); 
     alert(key); 
     obj[key]=null; 
    } 

    //updated using your bootstrap class to show/hide 
    if($('#mytable input:checkbox:checked').length > 1) { 
     $('#btn2').removeClass('hide'); 
    } else { 
     $('#btn2').addClass('hide'); 
    } 

}); 

更新使用引導類按您的更新問題。

1

這裏的FIDDLE

if($('#mytable input:checkbox:checked').length > 1) 
     $('#btn2').show(); 
    else 
     $('#btn2').hide(); 
0

嘗試這個

var val = 0; 
var groupTrCount = 0; 
$(document).ready(function() { 
    var obj={}; 
    $('#btn1').click(function() { 
     if ($(".span4").val() != "") { 
      $("#mytable").append('<tr id="mytr' + val + '"></tr>'); 
      $tr=$("#mytr" + val); 
      $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>'); 
      $(".span4").each(function() { 
       $tr.append("<td >" + $(this).val() + "</td>"); 
      }); 
      var arr={}; 
      name=($tr.find('td:eq(1)').text()); 
      email=($tr.find('td:eq(2)').text()); 
      mobile=($tr.find('td:eq(3)').text()); 
      arr['name']=name;arr['email']=email;arr['mobile']=mobile; 
      obj[val]=arr; 
      val++; 
     } else { 
      alert("please fill the form completely"); 
     } 
    }); 
    $(document).on('click', '#btn2',function() { 
     var creat_group = confirm("Do you want to creat a group??"); 
     if (creat_group) { 
      console.log(obj); 

      $tr.append("<td >" + groupTrCount + "</td>"); 

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>'); 
    $tr=$("#groupTr" + groupTrCount); 
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:" 
    var userColumn = "<ul>"; 
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() { 
     var count=0; 
     $(this).find('td').each(function() { 
     if(count == 1){ 
     userColumn+= "<li>" + $(this).html() + "</li>" ; 
     } 
     count++; 
    }); 
});; 
      userColumn+="<ul>"; 
      $tr.append("<td >" +userColumn+ "</td>"); 
     groupTrCount++; 
     }   
    }); 
    $(document).on('change','#mytable input:checkbox',function() { 
     var rowCount = $('#mytable tr').length; 
     if($('input:checkbox:checked').length > 1 && rowcount > 6) { 
     $('#btn2').removeClass('hide') 
    } 
    }); 
}); 

Updted小提琴是:http://jsfiddle.net/4GP9c/184/

+0

讓我更新了這個小提琴它的好還是不好http://jsfiddle.net/4GP9c/184/ –

+0

在這個小提琴只有組按鈕可見時,超過5個用戶在桌子 –

相關問題