Wie Javascript verwenden, um die Schaltfläche zu aktivieren, wenn das Kontrollkästchen aktiviert ist?

Question

Ich brauche für diese PHP-Datei eine Modifikation, aber ich weiß kein Javascript. Das macht es mir wirklich schwer, es zu tun.

Ich möchte dies tun: Wenn das Kontrollkästchen aktiviert ist, aktivieren Sie meine Absenden-Schaltfläche sonst nicht aktivieren (Standard).

Ich habe bereits einige Änderungen vorgenommen: Ich habe das Kontrollkästchen mit ID = Checkbox hinzugefügt und ich habe den Parameter disabled = "disabled" zu meiner Schaltfläche hinzugefügt.

Dies funktioniert. Jetzt muss ich nur die Schaltfläche aktivieren, wenn das Kontrollkästchen aktiviert ist.

Aber ich habe jetzt zwei Probleme:

1. Ich weiß nicht, wo die Javascript-Code in meine Datei
2. Ich weiß nicht, zu setzen, um die ich anrufen kann oder Javascript in meinem Code aktivieren

Wäre wirklich nett wenn mir jemand helfen könnte.

<?php 
if(isset($_POST['photo-name'])){ 
    $photo_name = $_POST['photo-name']; 
} 
if(isset($_POST['photo-title'])){ 
    $photo_title = $_POST['photo-title']; 
} 
if(isset($_POST['photo-description'])){ 
    $photo_description = $_POST['photo-description']; 
} 

if(empty($photo_name)){ 
    $photo_name = ''; 
} 
if(empty($photo_description)){ 
    $photo_description = ''; 
} 
$sql= $wpdb->get_results("SELECT name,id FROM ".$wpdb->prefix."u_gallery_cat ORDER BY name ASC"); 

$html .= '<div><label for="photo-name"><strong>'.__('Caption:','user-gallery').'</strong></label></div>'; 
$html .= '<div class="contest-input"><input type="text" name="photo-name" id="photo-name" value="'.$photo_name.'" /></div>'; 
$html .= '<div><label for="photo-content"><strong>'.__('Description:','user-gallery').'</strong> <span class="contest-small-font-2">'.__('(Optional)','user-gallery').'</span></label></div>'; 
$html .= '<div class="contest-input"><textarea class="photo-description-textarea" name="photo-description" id="photo-description">'.$photo_description.'</textarea></div>'; 
if(!empty($sql)){ 
    $html .= '<div><label for="photo-category"><strong>'.__('Category:','user-gallery').'</strong></label></div>'; 

    $html .= '<select name="photo-category" id="photo-category">'; 
    foreach($sql as $item){ 
     $html .= '<option value="'.$item->id.'">'.$item->name.'</option>'; 
    } 
    $html .= '</select>'; 
} 
if ($photo_limit == 100000000){ 
    $html .= '<div><label for="user-photo"><strong>'.__('Select image:','user-gallery').'</strong></label></div>'; 
}else{ 
    $html .= '<div><label for="user-photo"><strong>'.__('Select image: (max.','user-gallery').' '.$p_limit.')</strong></label></div>'; 
} 
$html .= '<div class="contest-input"><input type="file" name="user-photo" id="user-photo" size="50" accept="image/*" onchange="loadFileU(event)" class="selimg"></div>'; 
$html .= '<img id="coutput"/>'; 
$html .= '<div class="ug-clear"></div>'; 
$html .= '<input type="hidden" name="user_id" />'; 
$html .= '<input type="hidden" name="action" value="new_post" />'; 
$html .= '<div class="contest-button-div">'; 
$html .= '<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox"></div>'; 
$html .= '<div class="contest-button"><input type="submit" value="'.__('Add Photo','user-gallery').'" id="submit" disabled="disabled" name="submit" class="ug-styled-button tooglebutton" /></div>'; 
$html .= '<div class="ug-clear"></div>'; 
$html .= '</div>'; 
$html .= '<div class="ug-clear"></div>'; 
$html .= '</form>'; 
$html .= '<div class="ug-clear"></div>'; 
$html .= '</div>'; 
} 

?> 

Answer 1

Ohne JQuery mit:

Auf dem Kontrollkästchen ein onchange() Ereignis hinzufügen Javascript auslösen:

<div class="contest-button"><input type="checkbox" name="chk" id="chk" value="yourvalue" class="checkbox" onchange="openSubmit()"></div> 

Dann für Ihr Skript:

<script type="text/javascript"> 

function openSubmit(){ // This function is called by the checkbox click 
    if(document.getElementById('chk').checked == true){ // If it is checked 
    document.getElementById('submit').disabled = false; // Then we remove the disable attribute 
} 
</script> 

Mit Jquer y:

$('#chk').change(function(){ // You put an event on your checkbox here 
    if($(this).is(':checked')){ // If statut of checkbox is checked 
    document.getElementById('submit').disabled = false; // Then we remove the disable attribute 
    } 
}); 

Sie können dieses Skript setzen am Ende der Datei nach dem PHP.