Question

抱歉，首先是我即将上映的英语。

我会遇到一个非常特殊的问题。我有一个网格，每个radioButton生成转换为jquery单选按钮。

现在我创建了一个JQuery函数，只允许你每行给出一个答案。好久不过。特殊的Thing如下：我向Jquery Label添加了一个类，但是如果你点击Td中的某个地方，这个类会被自动删除。但是，如果你直接点击Circle，它就可以了。为什么呢？

我已经对这个函数进行了调试，并且Jquery添加了这个类，但是在最后将它删除了。

看看这个小提琴：jsfiddle.net/Ehhxa/5 /

如希望的那样，继承了JQuery代码：

$('td').click(function () {
    var id = $(this).find('input').attr('id');

    var row = $(this).closest('tr');
    row.find('input:checked').each(function () {
        $(this).prop('checked', false).checkboxradio('refresh');
        // $(this).closest('div').find('.ui-btn-inner').removeClass('selected');
    });
    $("#" + id).prop('checked', true).checkboxradio('refresh');
    $("#" + id).closest('div').find('.ui-btn-inner').addClass('selected');
});

重要提示：在您看到网格之前，可能需要放大小提琴。（它是一个响应式网格，移动版本可以工作）

Answer 1

请检查此解决方案： http://jsfiddle.net/8uk6n/

$('td').click(function () {
        if ($(this)[0].localName == "td") {
            var id = $(this).find('input').attr('id');
        } else {
            var id = $(this).attr('id');
        }
        var row = $(this).closest('tr');
        row.find('input:checked').each(function () {
            $(this).prop('checked', false).checkboxradio('refresh');

        });
        $("#" + id).prop('checked', true).checkboxradio('refresh');        
        $("#" + id).parent().parent().parent().find('.selected').removeClass('selected');
        $("#" + id).parent().addClass('selected');
    });

并将所选类的CSS更改为

.selected .ui-btn-inner
    {
        background-color: #ACCAE8 !important
    }

Answer 2

见完全答案。感谢大家的支持和帮助。

非常感谢 argonius ，他指出了正确的解决方案

小提琴：Fiddle

HTML表格（只有一行）

<table id="tbl_sf1" data-role="table" class="tbl_sf1_responsive">
        <thead>
            <tr>
              <th></th>
              <th>SPALTE 1</th>
              <th>SPALTE 2</th>
              <th>SPALTE 3</th>
              <th>SPALTE 4</th>
              <th>SPALTE 5</th>
             </tr>
        </thead>
        <tbody>
            <tr id="tbl_sf1_1">
                <th id="tbl_sf1_1_0">ZEILE 1</th>                              
                <td id="tbl_sf1_1_1"><label><input name="rb_1" value="1" id="rb_1_1" type="radio"/></label></td>                          
                <td id="tbl_sf1_1_2"><label><input name="rb_1" value="2" id="rb_1_2" type="radio"/></label></td>
                <td id="tbl_sf1_1_3"><label><input name="rb_1" value="3" id="rb_1_3"  type="radio"/></label></td>
                <td id="tbl_sf1_1_4"><label><input name="rb_1" value="4" id="rb_1_4"  type="radio"/></label></td>
                <td id="tbl_sf1_1_5"><label><input name="rb_1" value="5" id="rb_1_5"  type="radio"/></label></td>
            </tr>                                                                                                     
        </tbody>
    </table>

表格CSS格式

.table {
  width: 100%;
  margin-bottom: 20px;
}
td,th
{ 
    border-color: #ACCAE8 !important;
    border: 1px solid #ACCAE8;
    background-color: #FFFFFF;
    text-Align: center;    
    border-width: 1px;
    border-top-style: Solid;
    border-bottom-style: Solid;
}


/* THEAD TEXT FORMATION */
thead tr th 
{
    border-top: none;
    font-weight: normal !important;
    text-align:center !important;
    padding:0px 20px 0px 20px;
}



div.ui-radio label 
{
    border:none ;
}
span.ui-btn-inner 
{
    background-color:#FFF;
}

/* radio Buttons */ 
div.ui-radio label 
{
    margin: 0;
}


textarea 
{
/* TBODY */
     height: 120px !important;
}

@media (min-width: 45em) 
{
    thead td 
    {
        width:120px;
    }
    /* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
    .ui-table-reflow.ui-responsive {
        display: table-row-group;
    }
    /* Show the table header rows */ 
    .tbl_sf1_responsive td,
    .tbl_sf1_responsive th,
    .tbl_sf1_responsive tbody th,
    .tbl_sf1_responsive tbody td,
    .tbl_sf1_responsive thead td,
    .tbl_sf1_responsive thead th 
    {
        border-left:none;
        font-weight:normal;    
        overflow:hidden;
        height: 50px;
        padding: 0px;
        vertical-align: middle;
        display: table-cell;
        margin: 0;
    }
    thead tr th 
    {
        padding:10px !important;
    }
    /* Hide the labels in each cell */ 
    .tbl_sf1_responsive td .ui-table-cell-label,
    .tbl_sf1_responsive th .ui-table-cell-label
    { 
        display: none;
    }

    div.ui-radio,
    div.ui-radio label,
    label span.ui-btn-inner
    {
        height:100%;
        padding:0px! important;
    }
    thead th:last-of-type, 
    thead th:first-of-type
    {
        border-left: none;
    }

    .ui-btn-inner:hover 
    {
            background:#DEEAF5 !important;
    }

    .selected .ui-btn-inner
    {
        background-color: #ACCAE8 !important
    }

    td > div > label > span > span.ui-icon
    {
    /* TBODY */
        left: 50% !important;
        margin-left:-9px;
    }
}


@media (max-width: 45em) 
{
    .tbl_sf1_responsive 
    {
        width:100% !important;
    }
    .tbl_sf1_responsive td,
    .tbl_sf1_responsive th 
    {
        width: 100% !important;
        min-height:40px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
        margin-bottom: 5px;
    }
    tbl_sf1_responsive th 
    {
        border:none !important;
    }
    .tbl_sf1_responsive th 
    {
     font-weight:bold;   
    }

        b.ui-table-cell-label 
    {
        font-weight: normal;
    }

     div.ui-radio 
     {
         float:left;
     }

     span.ui-btn-inner 
     {
         padding-right: 0px !important;
     }

     tbody th 
     {
         border: none !important;
         background: #f9f9f9 /*{c-body-background-color}*/
     }
}

小CSS-Line，做了Trick我搜索了这么久。

label.ui-radio-on > span
{
    background:#ACCAE8 !important;
}

jquery addClass - 在我的函数之外添加和删除类

2 个答案: