JQuery: запретить снятие флажка

Question

Я пытаюсь разрешить пользователю устанавливать флажки в хронологическом порядке.

<table id="status"> 
    <tr><td>Ready <input type="checkbox"></td></tr> 
    <tr><td>Set <input type="checkbox"></td></tr> 
    <tr><td>Go <input type="checkbox"></td></tr> 
</table> 

Пользователь не допускается, чтобы снять флажки и разрешается только щелкнуть в порядке Ready, Set, Go. Для этого я могу добавлять события только к флажкам, а не к элементу td.

$("#status input[type='checkbox']").on("change",function(event) { 

    if($(this).parents("tr:first").prev("tr").length==0) { 
      var first_checkbox = 1; 
     } else { 
      var first_checkbox = 0; 
     } 
     if($(this) 
      .parents("tr:first") 
      .prev("tr") 
      .find("input[type='checkbox']") 
      .is(":checked") || first_checkbox==1) { 
      $(this).attr("checked",true); 

     } 
    } 
}); 

Это позволяет только щелкнуть, если щелкнуть предыдущий флажок, но как я могу предотвратить блокировку флажка?

Answer 1

Programatically это довольно просто:

1. Отключить все CHEC kboxes, для первого, за исключением, во время выполнения
2. Когда флажок установлен, отключите его после этого, и включить следующий флажок

Смотреть демо ниже, он должен работать как задумано:

$(function() { 
 
    $('#status input[type="checkbox"]').each(function() { 
 
    // Disable all but the first checkbox 
 
    if ($(this).closest('tr').index() !== 0) { 
 
     $(this).prop('disabled', true); 
 
    } 
 
    }).on('change', function() { 
 
    // Once checked, disable it 
 
    $(this).prop('disabled', true); 
 

 
    // Then enable the next checkbox 
 
    $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="status"> 
 
    <tr> 
 
    <td>Ready 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Set 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Go 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table>

---

Предупреждение. Когда элементы ввода отключены, их значения не отправляются при отправке формы. Вы можете отключить взаимодействие другими способами вместо того, чтобы полагаться на логический атрибут disabled. @Rich has an alternative solution of disabling pointer events, который я модифицировал для своего демо.Я добавил некоторые стили CSS, так что пользователи могут сказать, если флажок кликабельна или нет:

$(function() { 
 
    $('#status input[type="checkbox"]').each(function() { 
 
    // Disable all but the first checkbox 
 
    if ($(this).closest('tr').index() !== 0) { 
 
     $(this).closest('tr').addClass('disabled'); 
 
    } 
 
    }).on('change', function() { 
 
    // Once checked, disable it 
 
    $(this).closest('tr').addClass('disabled checked'); 
 

 
    // Then enable the next checkbox 
 
    $(this).closest('tr').next('tr').removeClass('disabled'); 
 
    }); 
 
});

tr { 
 
    background-color: #BEEB9F; 
 
} 
 
tr.disabled { 
 
    background-color: #FFFF9D; 
 
} 
 
tr.disabled.checked { 
 
    background-color: #97C4A6; 
 
} 
 
tr.disabled input { 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="status"> 
 
    <tr> 
 
    <td>Ready 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Set 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Go 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Вы можете использовать disabled атрибут для флажков и включить или отключить их время от времени:

$(document).on('click', 'input', function(e) { 
 
    var that = $(this); 
 
    var id = that.attr('id'); 
 
    var set = $('#set'); 
 
    var go = $('#go'); 
 
    if (id == 'ready') {   
 
    if (!set.is(':checked') && !go.is(':checked')) { 
 
     if (that.is(':checked')) { 
 
     set.removeAttr('disabled'); 
 
     } else { 
 
     set.attr('disabled', true); 
 
     go.attr('disabled', true); 
 
     } 
 
    } else { 
 
     e.preventDefault(); 
 
    } 
 
    } 
 
    if (id == 'set') { 
 
    if (!go.is(':checked')) { 
 
     if (that.is(':checked')) { 
 
     go.removeAttr('disabled'); 
 
     } else { 
 
     go.attr('disabled', true); 
 
     } 
 
    } else { 
 
     e.preventDefault(); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="status"> 
 
<tr><td>Ready <input id="ready" type="checkbox"></td></tr> 
 
<tr><td>Set <input id="set" type="checkbox" disabled></td></tr> 
 
<tr><td>Go <input id="go" type="checkbox" disabled></td></tr> 
 
</table>

Answer 3

Это должно делать именно то, что ищете.

$("#status input[type='checkbox']").on("click", function (e) { 
 
    var checkbox = $(this); 
 
    if (checkbox.is(":checked") { 
 
     // do the confirmation thing here 
 
     e.preventDefault(); 
 
     return false; 
 
    } 
 
});

Answer 4

Просто измените $(this).attr("checked",true);$(this).prop('checked', true) к и добавить следующее:

if(first_checkbox != 1 && !$(this).parents('tr:first').prev('tr').find('input[type="checkbox"]').is(":checked")) { 
    $(this).prop('checked', false); 
} 

Answer 5

Вот пример без отключения флажков: https://jsfiddle.net/t338vu33/

Чекбоксы должен быть снято или зарегистрировано в хронологическом порядке:

var current = 0; 

$("#status input[type='checkbox']").on("change", function(event) { 
     var selectedIndex = $('input:checkbox').index($(this)); 

    if ($(this).is(":checked")) {   
     if(selectedIndex != current) 
      $(this).prop('checked', false); 
     else 
      current ++; 
    }  
    else{  
     if(selectedIndex != current-1) 
      $(this).prop('checked', true); 
     else 
      current --; 
    } 
});