[英]I need to enable form (it is disabled on page load) after checkbox checked
我在這里需要您的幫助,因為我不了解javascript或jquery庫,我認為我絕對必須在我的project中使用它們。頁面加載時我有一個禁用的表單,我想在選中復選框時啟用。我嘗試了很多,但是沒有找到任何解決方案。
頁面加載時,以下是“禁用”代碼:
$(document).ready(function (e) {
$("#form1 *").prop("disabled", "disabled");
});
復選框是:
<input type="checkbox" id="checkbox" name="opt[]" value="'.$points.'">
如果您有任何想法請通知我!
一槍但..沒有結果是:
document.getElementById('checkbox').onchange = function() {
document.getElementById('eksargirwsh').disabled = this.checked;
};
表格代碼:
<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>
用這個。 您可以選擇不是#checkbox
元素,然后首先將其禁用。 然后,將功能添加到checkbox
更改,如果選中則啟用。
$(document).ready(function (e) {
$("#form1 *:not(#checkbox)").prop("disabled", true);
$("#form1").addClass('disabled');
$('#checkbox').change(function(){
$("#form1 *:not(#checkbox)").prop("disabled", !this.checked);
$("#form1").toggleClass('disabled', !this.checked);
})
});
#form1{
opacity: 1;
}
#form1.disabled{
opacity: 0.2;
}
如果是,則復選框的格式相同
您必須禁用整個頁面,除了
$(document).ready(function() {
$('form :not([type=checkbox])').prop('disabled',true);
});
將此功能放在復選框中
$(":checkbox").click(function(){
if (this.checked) {
$('#form :not([type=checkbox])').prop('disabled',false);
}
else{
$('#form :not([type=checkbox])').prop('disabled',true);
}
}) ;
對於用戶要求,在下面創建了小提琴,是鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.