/    Sign up×
Community /Pin to ProfileBookmark

Multiselect box

Copy linkTweet thisAlerts:
Dec 11.2007

Can anyone help me with the javascript code to disable all the other checkbox based on the selection of first check box

Thank you

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERDec 12.2007 — Do you have some sample script to view?
Copy linkTweet thisAlerts:
@webdev2345authorDec 12.2007 — I have an issue with Javascript Where in if user select the first check box all the other checkbox should become disabled and the textbox below should get auto filled and this is only case with the first checkbox but not with the other.

If the user selects the other checkboxes nothing should get disabled or nothing should be filled in text box .I am populating all the values for the checkbox from the form

This is the sample code i have with me

function disable(cbx) {

//if(!cbx) return;

var frm = cbx.form;

alert

for(var i=0;i<frm.elements.length;i++) {

if (frm.elements[i].type && frm.elements[i] != cbx) {

if(frm.elements[i].type.toLowerCase() == 'checkbox') {

frm.elements[i].disabled =cbx.checked;

}

}

}

}

<logic:iterate id="regTypelookup" name="registration" property="registrationTypeList">

<tr>

<td class="text">

<html:multibox name="registration" property="registrationTypeItems" styleClass="text" onclick="disable(this);">

<bean:write name="regTypelookup" property="registrationTypeId"/>


</html:multibox>


<bean:write name="regTypelookup" property="registrationTypeDesc" scope="page" />

</td>

</tr>

</logic:iterate>



Please kindly help me with this issue please

Thank you
Copy linkTweet thisAlerts:
@krishna832Feb 13.2010 — My code is working proper way but while removeing values from second select box i didnt getting proper Sorting Order So Please Anyone Can Help To Me

<html>

<head>

<script type="text/javascript">


function sortAvailable() {

var ai = document.getElementById("availableItems");

var si = document.getElementById("selectedItems");

ai.sort();

si.sort();

}

function addItems() {

// alert("asdsd");

var ai = document.getElementById("availableItems");

var si = document.getElementById("selectedItems");

for (i=0;i<ai.options.length;i++) {
if (ai.options[i].selected) {
var opt = ai.options[i];
si.options[si.options.length] = new Option(opt.innerHTML, opt.value);
ai.options[i] = null; i = i - 1;
ai.sortAvailable()
}
}
}

function addAll() {

var ai = document.getElementById("availableItems");

var si = document.getElementById("selectedItems");

for (i=0;i<ai.options.length;i++) {

var opt = ai.options[i];

si.options[si.options.length] = new Option(opt.innerHTML, opt.value);

}

ai.options.length = 0;

}



function removeItems() {

var ai = document.getElementById("availableItems");

var si = document.getElementById("selectedItems");

for (i=0;i<si.options.length;i++) {

if (si.options[i].selected) {

var opt = si.options[i];

ai.options[ai.options.length] = new Option(opt.innerHTML, opt.value);

si.options[i] = null; i = i - 1;

}

}

}



function removeAll() {

var ai = document.getElementById("availableItems");

var si = document.getElementById("selectedItems");

for (i=0;i<si.options.length;i++) {

var opt = si.options[i];

ai.options[ai.options.length] = new Option(opt.innerHTML, opt.value);

}

si.options.length = 0;

sortAvailable();

}

function frmSubmit() {

var si = document.getElementById("selectedItems");

for (i=0;i<si.options.length;i++) { si.options[i].selected = true; }

document.form1.submit(); }



</script>

<script>

function listbox_selectall(listID, isSelect) {



 var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {

listbox.options[count].selected = isSelect;

}
}</script>
<script>

</script>


<style type="text/css">

.btn {width:90px;}

</style>

</head>

<body onload="sortAvailable();">

<form name="form1" id="form1" method="post" >

<div style="width:130px;float:left;">

<input type="hidden" name="ids" value="<?php echo $id;?>"

<select size="10" multiple name="availableItems[]" id="availableItems" style="width:120px;">

<option value="all" name="all[]" onClick="listbox_selectall('availableItems', true)">all</option>

<OPTION value="Afghanistan">Afghanistan</OPTION>

<OPTION value="Bahamas">Bahamas</OPTION>

<OPTION value="Barbados">Barbados</OPTION>

<OPTION value="Belgium">Belgium</OPTION>

<OPTION value="Bhutan">Bhutan</OPTION>

<OPTION value="China">China</OPTION>

<OPTION value="Croatia">Croatia</OPTION>

<OPTION value="Denmark">Denmark</OPTION>

</select>

</div>

<div style="width:100px;float:left;">

<input type="button" class="btn" value="Add" onclick="addItems();" />

<input type="button" class="btn" value="Add All" onclick="addAll();" />

<input type="button" class="btn" value="Remove" onclick="removeItems();" />

<input type="button" class="btn" value="Remove All" onclick="removeAll();" />


<input type="button" class="btn" value="Submit" onclick="frmSubmit();" />

</div>

<div style="width:130px;float:left">

<select size="10" multiple="multiple" name="selectedItems[]" id="selectedItems" style="width:120px;">

</select>

</div>

</form>

</body>

</html>
×

Success!

Help @webdev2345 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...