Warum funktioniert die jQuery-Einstellung der jQuery-Eigenschaft nur bei der ersten Funkeingabe?

Question

Ich habe vier Eingänge und möchte mit jQuery zwei von ihnen deaktiviert und deaktiviert werden.

Die erste funktioniert, wie ich es auch erwarten würde, aber die zweite setzt die checked-Eigenschaft, scheint aber die deaktivierte Eigenschaft zu ignorieren.

jsfiddle: https://jsfiddle.net/ov5uow38/

Html:

<div class="selectedTime"> 
    <label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label> 
    <div class="nonSat"> 
    <label class="radio"> 
    <input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2"> 
    10:00 - 13:30 
    </label> 
    <label class="radio"> 
    <input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3"> 
     11:30 - 15:00 
    </label> 
    <label class="radio"> 
    <input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4"> 
     13:30 - 17:30 
    </label> 
    </div> 
</div> 

JQuery-Code:

$('.time_1').prop('disabled', true); 
$('.time_1').prop('checked',false); 
$('.time_2').prop('disabled', true); 
$('.time_2').prop('checked',false); 

Answer 1

Update:

In Ihrem jsFiddle, Sie sind nicht inklusive jQuery-Bibliothek. Mit jQuery hier aktualisiert: https://jsfiddle.net/ov5uow38/2/.

Es funktioniert für die erste, weil $ als Console Functions gilt.

---

Es funktioniert gut für mich:

$('.time_1').prop('disabled', true); 
 
$('.time_1').prop('checked',false); 
 
$('.time_2').prop('disabled', true); 
 
$('.time_2').prop('checked',false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selectedTime"> 
 
    <label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label> 
 
    <div class="nonSat"> 
 
    <label class="radio"> 
 
     <input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2"> 
 
     10:00 - 13:30 
 
    </label> 
 
    <label class="radio"> 
 
     <input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3"> 
 
     11:30 - 15:00 
 
    </label> 
 
    <label class="radio"> 
 
     <input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4"> 
 
     13:30 - 17:30 
 
    </label> 
 
    </div> 
 
</div>

Es wird empfohlen, für die besten Ergebnisse, $(document).ready()-Funktion verwenden. Nicht sicher, warum es trotzdem funktioniert.

$(function() { 
 
    $('.time_1').prop('disabled', true); 
 
    $('.time_1').prop('checked',false); 
 
    $('.time_2').prop('disabled', true); 
 
    $('.time_2').prop('checked',false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selectedTime"> 
 
    <label class="radio"><input type="radio" value="08:30 - 12:00" name="f_fitting_time" class="time_1" checked="checked" disabled="">08:30 - 12:00</label> 
 
    <div class="nonSat"> 
 
    <label class="radio"> 
 
     <input type="radio" value="10:00 - 13:30" name="f_fitting_time" class="time_2"> 
 
     10:00 - 13:30 
 
    </label> 
 
    <label class="radio"> 
 
     <input type="radio" value="11:30 - 15:00" name="f_fitting_time" class="time_3"> 
 
     11:30 - 15:00 
 
    </label> 
 
    <label class="radio"> 
 
     <input type="radio" value="13:30 - 17:30" name="f_fitting_time" class="time_4"> 
 
     13:30 - 17:30 
 
    </label> 
 
    </div> 
 
</div>