Looking for checkbox enable-disable coding techniques: tips to reduce JavaScript code -
i ask encode following restriction in javascript in more optimal way, because way long.
what want mark 2 checkbox options, disabling remaining
<form> <div> <input type="checkbox" id="a" name="question1">a) java <br> <input type="checkbox" id="b" name="question1">b) c <br> <input type="checkbox" id="c" name="question1">c) c++ <br> <input type="checkbox" id="d" name="question1">d) c# <br> </div> </form>
and javascript code improve, worked way did, did not like, think it's code.
addeventlistener('load',compruebacheck,false); function compruebacheck(){ document.getelementbyid('a').onchange = function() { if (document.getelementbyid('b').checked) { document.getelementbyid('c').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('c').checked) { document.getelementbyid('b').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('d').checked) { document.getelementbyid('b').disabled = this.checked; document.getelementbyid('c').disabled = this.checked; } }; document.getelementbyid('b').onchange = function() { if (document.getelementbyid('a').checked) { document.getelementbyid('c').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('c').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('d').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('c').disabled = this.checked; } }; document.getelementbyid('c').onchange = function() { if (document.getelementbyid('a').checked) { document.getelementbyid('b').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('b').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('d').disabled = this.checked; } if (document.getelementbyid('d').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('b').disabled = this.checked; } }; document.getelementbyid('d').onchange = function() { if (document.getelementbyid('a').checked) { document.getelementbyid('b').disabled = this.checked; document.getelementbyid('c').disabled = this.checked; } if (document.getelementbyid('b').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('c').disabled = this.checked; } if (document.getelementbyid('c').checked) { document.getelementbyid('a').disabled = this.checked; document.getelementbyid('b').disabled = this.checked; } }; }
sorry inconvenience, i'm starting learn javascript , not think of better technique little experience in language, appreciate alternatives find things can done using javascript. thank you.
i think looking for.
neat question.
addeventlistener('load',compruebacheck,false); function compruebacheck() { document.getelementbyid('a').onchange = function() { func1(); } document.getelementbyid('b').onchange = function() { func1(); } document.getelementbyid('c').onchange = function() { func1(); } document.getelementbyid('d').onchange = function() { func1(); } func1(); function func1() { var count4 = (document.getelementbyid('a').checked ? 1 : 0) + (document.getelementbyid('b').checked ? 1 : 0) + (document.getelementbyid('c').checked ? 1 : 0) + (document.getelementbyid('d').checked ? 1 : 0); document.getelementbyid('a').disabled = false; document.getelementbyid('b').disabled = false; document.getelementbyid('c').disabled = false; document.getelementbyid('d').disabled = false; if (count4 == 2) { if (!document.getelementbyid('a').checked) { document.getelementbyid('a').disabled = true; } if (!document.getelementbyid('b').checked) { document.getelementbyid('b').disabled = true; } if (!document.getelementbyid('c').checked) { document.getelementbyid('c').disabled = true; } if (!document.getelementbyid('d').checked) { document.getelementbyid('d').disabled = true; } } } }
Comments
Post a Comment