platanas20 platanas20 - 6 months ago 19
Javascript Question

I need to enable form (it is disabled on page load) after checkbox checked

I need your help here cause I am not aware of javascript or jquery library and i think i definitely have to use them in my project.I have a disabled form when the page loads and I want to enable when I checked on the check box.I tried a lot but I didn't find any solutions..

Here is the 'disable' code when the page loads:

$(document).ready(function (e) {
$("#form1 *").prop("disabled", "disabled");
});


The checkbox is :

<input type="checkbox" id="checkbox" name="opt[]" value="'.$points.'">


If you have any ideas please inform me!

One shot but ..no result was:

document.getElementById('checkbox').onchange = function() {
document.getElementById('eksargirwsh').disabled = this.checked;
};


form code:

<form method="post" id="eksargirwsh" action="update_points_test2.php">

<div class="col-lg-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Form1</h5>

</div>
<div class="ibox-content">

echo '

<div>
<div class="feed-activity-list"><div style="border: 0.5px solid green; border-right-style:none;" class="input-group m-b"><span class="input-group-addon">
<input type="checkbox" id="checkbox" name="opt[]" value="'.$points.'"></span>
<input type="hidden" name="opt2[]" value="'.$row_select4['id'].'">


<div class="feed-element">
<a href="profile.html" class="pull-left">
<img alt="image" class="img-circle" src="'. $row_select4['image_url']. '">
</a>
<div class="media-body ">
<div class="ibox-tools">
<span class="label label-primary">ΔΙΑΘΕΣΙΜΟ</span><br><br>
<span class="label label-warning-light pull-right"><strong>' .$row_select4['points']. '</strong> Πόντοι</span>
</div>
<strong>' .$row_select4['title']. ' </strong> ' .$row_select4['description']. ' <br>
<small class="text-muted">Διάρκεια: <strong>' .$row_select4['start_date']. ' - ' .$row_select4['end_date']. ' </strong></small>
<div class="well">
' .$row_select4['description']. '
</div>
</div>
</div>
</div>

</div>' ;

<button type="submit" id="submit" class="btn btn-w-m btn-primary">SUBMIT</button>
</form>

Answer

The checkbox is in the same form if it is then

you have to do whole page disable except that

$(document).ready(function() {
       $('form :not([type=checkbox])').prop('disabled',true);

});

put this function in checkbox

 $(":checkbox").click(function(){
    if (this.checked) {
       $('#form :not([type=checkbox])').prop('disabled',false);
    }
    else{
     $('#form :not([type=checkbox])').prop('disabled',true);
    }
}) ;

For the User requirement Fiddle is created below is the link

JSFiddle

Comments