Wenn Checkbox aktiviert ist, erlauben nur die nächste Checkbox

Question

ich mit PHP-Funktion

<table width='400' border='0' cellpadding='2' cellspacing='0' id='booking'> 
<tr> 
    <th width='150' align='left'>Start</th> 
    <th width='150' align='left'>End</th> 
    <th width='150' align='left'></th> 
    <th width='20' align='left'>reserv</th>   
</tr> 
<tr> 
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> 
</tr> 

i die mit Zeiten und Daten machen td Am Ende machen eine Tabelle zu überprüfen. In der letzten ist ein Kontrollkästchen.

Dieses ich mache etwa 10-mal:

<tr> 
    <td>" . $start . "</td>\r\n 
    <td>" . date("H:i:s", $finish_time) . "</td>\r\n 
    <td>" . $this->cost_currency_tag . number_format($this->cost_per_slot, 2) . "</td> 
    <td width='110'> 
     <input data-val='".$start."-".date("H:i:s", $finish_time)."' class='fields' type='checkbox'> 
    </td> 
</tr>"; 

ich machen, wenn ich eine Checkbox jquery überprüfen lassen nur die NEXT-Checkbox überprüfen. alle anderen deaktiviert. Und wenn ich das nächste überprüfe, muss es erlaubt sein, das nächste davon zu überprüfen.

ich mit diesem

$('.fields input[type=checkbox]').click(function(){ 
    var obj = $(this).siblings('input[type=text]'); 
    obj.attr('disabled', !obj.attr('disabled')); 
}) 

Aber ich verstehe es nicht funktioniert .. Ich habe auch versucht, mit ‚.next‘ versucht haben ... Kann jemand helfen?

Answer 1

Mit diesem Code

$(".fields").change(function(){ 
 
    var index = $(this).index() + 1; 
 
    $(".fields").attr("disabled", true); 
 
    $(".fields:lt("+ index +")").attr("disabled", false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="fields" /> 
 
<input type="checkbox" class="fields" /> 
 
<input type="checkbox" class="fields" /> 
 
<input type="checkbox" class="fields" /> 
 
<input type="checkbox" class="fields" />

Answer 2

Mohammad's Antwort scheint falsch zu sein. Sie können einige der Kontrollkästchen aktivieren und dann die Überprüfung von einer nicht zuletzt überprüft, um zu sehen, was das Problem wäre.

Hier, aber wenn Sie ein Kontrollkästchen deaktivieren, werden alle Kontrollkästchen danach deaktiviert.

Wenn Sie die restlichen ebenfalls deaktivieren möchten, verwenden Sie den kommentierten Abschnitt.

var fields = $(".fields"); 
 
fields.change(function() { 
 
    Array.prototype.reduce.call(fields, function(prev, curr) { 
 
    curr.disabled = !prev.checked || prev.disabled; 
 

 
    /* 
 
     If you want to uncheck remianing use this instead of above line: 
 
     curr.checked = prev.checked ? curr.checked : false; 
 
     curr.disabled = !prev.checked; 
 
    */ 
 
    return curr; 
 
    }); 
 
}); 
 

 
fields.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="checkbox" class="fields" /> check box</label><br/> 
 
<label><input type="checkbox" class="fields" /> check box</label><br/> 
 
<label><input type="checkbox" class="fields" /> check box</label><br/> 
 
<label><input type="checkbox" class="fields" /> check box</label><br/> 
 
<label><input type="checkbox" class="fields" /> check box</label><br/>

Answer 3

schließlich die richtige Antwort kommt (scheint die ausgewählte :) zu sein):

$("tr .fields").change(function() { 
 
    console.clear(); 
 
    $('.fields').attr('disabled', false); 
 
    var checkedItems = $(".fields:checked"); 
 
    if (!checkedItems.length) 
 
    return; 
 
    var checkedIndices = checkedItems.map(function() { 
 
    return $(this).closest('tr').index(); 
 
    }); 
 
    var lastInRow = Array.prototype.reduce 
 
    .call(checkedIndices, function(p, c) { 
 
     return (c > p + 1) ? p : c; 
 
    }); 
 
    $("tr:gt(" + (lastInRow + 1) + ") .fields") 
 
    .attr("disabled", true); 
 

 
    /* If you wnat to disable items before last check you can add this*/ 
 
    // $("tr:lt(" + (lastInRow) + ") .fields").attr("disabled", true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="8em"> 
 
     <input class='fields' type='checkbox'> 
 
    </td> 
 
    <td>This</td> 
 
    <td>is a</td> 
 
    <td>test</td> 
 
    </tr> 
 

 
</table>