0

I have 2 buttons add and group. Initially group button is hidden. Add button is used for creating records.

So for example: When 5 records are created(pressing 5 times add button). Now if user selects more than checkbox, then the hidden group button should appear. Can any body please tell me how to do this?

Please see this fiddle

I am using bootstrap css and for hiding I do as

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

UPDATE Check boxes will only appear if user enters some records. Filling the form and after pressing the add button

4

4 回答 4

4

See this FIDDLE

$(document).on('change','#mytable input:checkbox',function () {
    if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide')
    }
    else {
        $('#btn2').addClass('hide')
    }
});
于 2013-10-30T11:33:57.710 回答
1

change在事件中为复选框添加一个检查。小提琴和下面的例子：

$(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');
    }

});

根据您更新的问题更新为使用引导类。

于 2013-10-30T11:35:19.343 回答
1

这是小提琴

    if($('#mytable input:checkbox:checked').length > 1)
        $('#btn2').show();
    else
        $('#btn2').hide();
于 2013-10-30T11:35:54.823 回答
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')
    }
    });
});

更新的小提琴是：http: //jsfiddle.net/4GP9c/184/

于 2013-10-30T11:36:10.120 回答