I want to make a multiple User Agreement, that user must check the checkbox one by one. When a user checked content number 1, then content number 2 will move to the top of the list, and content number 1 will be dropped from the list.
So, the problem is, when user check the checkbox, the content is not moving.
Can someone help me to make moving content when checkbox is checked.
here's my script :
<script>
$(document).ready(function(){
$("#form").validate();
});
function showAmanat1(){
if(document.form.amanat1.checked)
{ document.form.amanat2.disabled=false; }
else { for (var i=2; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat2(){
if(document.form.amanat2.checked)
{ document.form.amanat3.disabled=false}
else { for (var i=3; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat3(){
if(document.form.amanat3.checked)
{ document.form.amanat4.disabled=false}
else { for (var i=4; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat4(){
if(document.form.amanat4.checked)
{ document.form.amanat5.disabled=false}
else { for (var i=5; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat5(){
if(document.form.amanat5.checked)
{ document.form.amanat6.disabled=false}
else { for (var i=6; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat6(){
if(document.form.amanat6.checked)
{ document.form.amanat7.disabled=false}
else { for (var i=7; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat7(){
if(document.form.amanat7.checked)
{ document.form.amanat8.disabled=false}
else { for (var i=8; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat8(){
if(document.form.amanat8.checked)
{ document.form.amanat9.disabled=false}
else { for (var i=9; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat9(){
if(document.form.amanat9.checked)
{ document.form.amanat10.disabled=false}
else { for (var i=10; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat10(){
if(document.form.amanat10.checked)
{ document.form.amanat11.disabled=false}
else { for (var i=11; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat11(){
if(document.form.amanat11.checked)
{ document.form.amanat12.disabled=false}
else { for (var i=12; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showAmanat12(){
if(document.form.amanat12.checked)
{ document.form.amanat13.disabled=false}
else { for (var i=13; i<14; i++)
{ var amanatx="amanat"+i;
document.forms.form[amanatx].checked=false;
document.forms.form[amanatx].disabled=true;
}
}
}
function showPernyataan(){
if(document.form.amanat13.checked)
{ document.form.c1.disabled=false;
document.form.c2.disabled=false;}
else { document.form.c1.checked=false; document.form.c2.checked=false;
document.form.c1.disabled=true; document.form.c2.disabled=true; }
}
</script>
<form id="form" name="form" method='POST'>
<tr>
<td align="justify" colspan="2">
<ol id="point">
<li>If this checkbox is checked, then the next checkbox should be appeared in top of list and the checked one is in bottom of list or dissapear.
</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name="amanat1" type="checkbox" class="required agreement" onchange="showAmanat1()"/></label>
<li>dummy for 2 </li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat2' type='checkbox' class='required agreement' onchange='showAmanat2()' disabled="disabled"/></label>
<li>dummy for 3</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat3' type='checkbox' class='required agreement' onchange='showAmanat3()'disabled="disabled"/></label>
<li>dummy for 4</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat4' type='checkbox' class='required agreement' onchange='showAmanat4()' disabled="disabled"/></label>
<li>dummy for 5</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat5' type='checkbox' class='required agreement' onchange='showAmanat5()' disabled="disabled"/></label>
<li>dummy for 6</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat6' type='checkbox' class='required agreement' onchange='showAmanat6()' disabled="disabled"/></label>
<li>dummy for 7</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat7' type='checkbox' class='required agreement' onchange='showAmanat7()' disabled="disabled"/></label>
<li>dummy for 8</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat8' type='checkbox' class='required agreement' onchange='showAmanat8()' disabled="disabled"/></label>
<li>dummy for 9</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat9' type='checkbox' class='required agreement' onchange='showAmanat9()' disabled="disabled"/></label>
<li>dummy for 10</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat10' type='checkbox' class='required agreement' onchange='showAmanat10()' disabled="disabled"/></label>
<li>dummy for 11</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat11' type='checkbox' class='required agreement' onchange='showAmanat11()' disabled="disabled"/></label>
<li>dummy for 12</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat12' type='checkbox' class='required agreement' onchange='showAmanat12()' disabled="disabled"/></label>
<li>dummy for 13</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat13' type='checkbox' class='required agreement' onchange='showPernyataan()' disabled="disabled"/></label>
</ol>
</td>
</tr>
</table>
</form>
</div>
and heres my fiddle https://jsfiddle.net/a6ea9yhL/5/
Hiding the element is easy
I would suggest you to put each point in a span and give that span an id like below:
<span id="amanat2">
<li>dummy for 2 </li>
<label class='agreement_label'>
<strong>I Agree<span class='red_style'>*)</span></strong>
<input name='amanat2' type='checkbox' class='required agreement' onchange='showAmanat2()' disabled="disabled"/>
</label>
</span>
Then in if block of your functions add
document.getElementById('amanat2').style.display = 'none'; // chnage the id
Your code's strategy has to be changed, rather than fixed! Why don't you reorder the list each time the user check an item, for example, initiate all the checkboxs as list elements, with a specific class: "vergin", and on each click, reorder the list according to the function: .prepend() Follow the link for more details:
Try this script. This script will move clicked list to the bottom of the list
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
</ul>
$("li").click(function(){
$(this).appendTo('ul');
});
Hope this will help you.
Looks like this is what you want
function clickCheckBox(elem){
document.getElementById('agreement').appendChild(elem);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="agreement">
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
<li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
</ol>
<div class="div-1"></div></div>