Wie man den Status readonly des Kontrollkästchens in Javascript

Question

umschalten Ich habe verstanden, dass das Hinzufügen von readonly Attribut zum Kontrollkästchen macht es nicht readonly. Wenn Sie das Attribut disable hinzufügen, wird der Wert nicht veröffentlicht.

Auf dieser SO post sind verschiedene Optionen vorgeschlagen, um das Kontrollkästchen schreibgeschützt zu machen.

Allerdings möchte ich den schreibgeschützten Zustand des Kontrollkästchens bei einigen Schaltflächen klicken, und auch den Wert auf Formular übermitteln.

Also wie vorgeschlagen ich hinzugefügt "Return false" auf Click-Ereignis. Funktioniert gut. Wie ändere ich dieses Verhalten?

<button type="button" id="btn">Toggle</button> 
<input type="checkbox" value="false" onClick="return false;" name="CheckBox1" /> 


$(document).ready(function() { 

    $("#btn").click(function() 
    { 
     //how do i toggle readonly here 
    }) 

}); 

Answer 1

Eine Möglichkeit, es zu tun ist, einen Klassennamen auf dem Kontrollkästchen wechseln, dann auf das Vorhandensein dieser Klassennamen testen, wenn der Benutzer das Kontrollkästchen Zustand zu ändern versucht.

(Sie könnten ein Datenattribut verwenden stattdessen aber auf diese Weise hat den zusätzlichen Vorteil, dass Sie dem Benutzer einig visuellen Hinweis geben, dass der Eingang ist nur lesbar.)

$("#btn").on("click", function() { 
 
    $('input[name="CheckBox1"]').toggleClass("readonly"); 
 
}); 
 

 
$('input[name="CheckBox1"]').on("click", function() { 
 
    if ($(this).hasClass('readonly')) {return false} 
 
});

.readonly { 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btn">Toggle</button> 
 
<input type="checkbox" value="false" name="CheckBox1" />