2016-12-14 3 views
1

Ich versuche, ein jquery-uicheckboxradio Widget programmatisch zu aktivieren/deaktivieren (d. H. Ohne die Maus zu verwenden). Ich habe alle möglichen Dinge ausprobiert, aber keine Freude. Um das Problem zu reproduzieren, eine leere HTML-Seite mit nur jquery und jquery-ui Script-Tags auswählen und dann das Widget dynamisch erstellen:Wie man jquery-ui checkboxradio programmatisch ein-/auscheckt

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Blank</title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head> 
<body> 
</body> 
</html> 

Nachdem die Seite geladen wird, schlug ich F12 zu bringen dev-Tools und geben Sie die folgenden Befehle

$container = $("<div>") 
$container.append($("<label for='chkbox'>")) 
$container.append($("<input type='checkbox' id='chkbox'>")) 
$container.appendTo('body') 
$('#chkbox').checkboxradio() 

Das Kontrollkästchen ist standardmäßig deaktiviert: eine minimale jquery-ui Checkbox zu bekommen. Versuchen wir es zu überprüfen:

$('#chkbox').attr('checked', true) // nope 
$('#chkbox').checkboxradio('refresh') // nope 
$('#chkbox').attr('checked', false) 
$('#chkbox').prop('checked', true) // nope 
$('#chkbox').prop('checked', false) 
$('#chkbox').addClass('ui-checkboxradio-checked') // not this either 
$('#chkbox').removeClass('ui-checkboxradio-checked') 
$('#chkbox').checkboxradio('option', 'classes.ui-checkboxradio-checked', true) // does nothing 
$('#chkbox').checkboxradio('option', 'ui-checkboxradio-checked', true) // does nothing 
$('#chkbox').checkboxradio('option', 'classes.ui-checkboxradio.ui-checkboxradio-checked', true) // and again, nothing... 

Das ist irritierend. Hat jemand eine Lösung für dieses scheinbar einfache Problem?

Antwort

2

Sie müssen change Funktion aufrufen als jquery ui wird die optische Wirkung auf Änderung nur so ändern settiing die checked Eigenschaft nehmen wird nicht jede Wirkung

$("#chkbox").attr("checked","checked").change(); 
2

Ich hoffe, es sollte Ihnen helfen, danke.

$container = $("<div>") 
 
$container.append($("<label for='chkbox'>")) 
 
$container.append($("<input type='checkbox' id='chkbox' >")) 
 
$container.appendTo('body') 
 
$('#chkbox').checkboxradio(); 
 
$('#chkbox').prop('checked',true).checkboxradio('refresh')
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Blank</title> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

Verwandte Themen