选中复选框后如何使用javascript激活按钮?

时间:2016-09-02 11:57:58

标签: javascript php html

我需要对这个php文件进行修改,但我不知道javascript。这让我很难怎么做。

我想这样做: 如果选中复选框而不是激活我的提交按钮,则不要激活它们(默认)。

我已经做了一些修改: 我添加了带id =复选框的复选框,并将参数disabled =“disabled”添加到我的按钮。

这很有效。现在我只需要在选中复选框时激活按钮。

但我现在有两个问题:

  1. 我不知道将javascript代码放在我的文件中
  2. 我不知道我可以在我的代码中调用或激活javascript
  3. 如果有人可以帮助我,那会非常好。

    <?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>';
    }
    
    ?>
    

1 个答案:

答案 0 :(得分:1)

不使用Jquery:

在您的复选框上添加onchange()事件以触发Javascript:

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

然后为你的剧本:

<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>

使用Jquery:

$('#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
  }
});

您可以在PHP之后将此脚本放在文件的底部。