切換禁用和啓用與引導表中的jQuery

我有一個表與列表，每行都有一個複選框，可以打開和關閉，當你點擊行，我已經解決了，但我也想要一個按鈕當一個或多個複選框被選中時被啓用，而另一個按鈕只在一個複選框被選中時被啓用。切換禁用和啓用與引導表中的jQuery

我不能啓用/禁用部分工作

這裏是我行HTML：

<tr class="ydelse ui-draggable ui-draggable-handle" data-title="test-title"> 
    <td><input type="checkbox"></td> 
    <td>This is a line title example</td> 
</tr>

這是在HTML /引導按鈕：

<div class="row"> 
    <div class="col-lg-2"> 
    <a href="#" class="btn btn-default ydelse-btn" id="sletydelse" disabled="disabled">SLET</a> 
    </div> 
    <div class="col-lg-5"> 
    <a href="#" class="btn btn-default ydelse-btn" id="redigerydelse" disabled="disabled">REDIGER</a>          
    </div> 
    <div class="col-lg-5 pull-right"> 
    <a href="#" class="btn btn-default ydelse-btn pull-right">OPRET NY</a>          
    </div> 
</div>

這是我的jquery：

$('table tbody tr').click(function(event) { 
    if (event.target.type !== 'checkbox') { 
    $(':checkbox', this).trigger('click'); 
    } 

    if ($(':checkbox', this).prop("checked")) { 
    valgte++; 
    } else { 
    valgte--; 
    } 

    console.log(valgte); 

    if (valgte > 0) { 
    $('#sletydelse').prop("disabled", false); 
    $('#redigerydelse').prop("disabled", false); 
    console.log($('#sletydelse').prop("disabled")); 
    } else if (valgte > 1) { 
    $('#redigerydelse').prop("disabled", true); 
    } 

    if (valgte == 0) { 
    $('#sletydelse').prop("disabled", true); 
    $('#redigerydelse').prop("disabled", true); 
    } 

    console.log(valgte); 
});

任何人都可以請指導我在正確的方向

來源

2015-12-14 Jacob Thygesen

你的條件有點怪異。你說，如果有1個複選框被選中，然後啓用它們。其他如果選中2個或更多選中，則禁用其中一個。否則如果（？）檢查0，則禁用其中的2個。但無論如何，這是一個代碼，它的作品http://codepen.io/anon/pen/jWbXVj – Couteau

太好了，謝謝。對不起，如果它不清楚，但你解決了它 –

我想你應該切換類，而不是屬性，因爲按鈕實際上是鏈接。

這裏有一個不同的方法

$('table tbody tr').click(function(event) { 
    if (event.target.type !== 'checkbox') { 
     $(':checkbox', this).trigger('click'); 
    } 
    valgte = $('input[type=checkbox]:checked').length; 

    $('#sletydelse, #redigerydelse').addClass("disabled") 
    if (valgte > 0) { 
     $('#sletydelse').removeClass("disabled"); 
    } 
    if (valgte == 1) { 
     $('#redigerydelse').removeClass("disabled"); 
    } 
});

和排序的工作示例http://jsfiddle.net/42jevgpo/

來源

2015-12-14 11:44:02 321zeno

謝謝，高效的解決方案 –

-1

$('table tbody tr').click(function(event) { 
    if (event.target.type !== 'checkbox') { 
    $(':checkbox', this).trigger('click'); 
    } 

    if ($(':checkbox', this).prop("checked")) { 
    valgte++; 
    } else { 
    valgte--; 
    } 
    console.log(valgte); 

    if (valgte > 0) { 
    $('#sletydelse').css("disabled", false); 
    $('#redigerydelse').css("disabled", false); 
    console.log($('#sletydelse').prop("disabled")); 
    } else if (valgte > 1) { 
    $('#redigerydelse').css("disabled", true); 
    } 

    if (valgte == 0) { 
    $('#sletydelse').css("disabled", true); 
    $('#redigerydelse').css("disabled", true); 
    } 
    console.log(valgte); });

來源

2015-12-14 11:17:51

使用CSS而不是道具 –

謝謝你的迴應，但我第一個答案去 –

切換禁用和啓用與引導表中的jQuery

回答

相關問題