We Keep Coding

Disabling the select tag field

I'm having trouble figuring out how to disable a select tag but keeping the selected value visible. The only solution I've found was to remove the items that should not be displayed. The use is that when a user created a new item and selects an option, the people viewing the created item should not be able to change it. Greying out text boxes has proved to be pretty simple but I don't know how to proceed with select tags.
This is how I do it right now but not exactly since this code follows a progression and gives editors different options depending on the stage they're in. However, other choice fields won't change through the process, they just need to remain what they were on creation.
//On item edit, set status to In Progress if in New
if($("option[value='New']").attr("selected") == "selected"){
//Disable New/Completed/Cancelled
$("option[value='New']").remove();
$("option[value='Completed']").remove();
$("option[value='Cancelled']").remove();
//Enable In Progress
$("option[value='In Progress']").attr("selected","selected");
//Call Claim WO Function
claimOrder();
}else if($("option[value='In Progress']").attr("selected") == "selected"){
//Remove New option
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").attr("selected","selected");
}else if($("option[value='Completed']").attr("selected") == "selected"){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Cancelled']").remove();
}else if($("option[value='Cancelled']").is(':selected')){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").remove();
}

what about disabling like this
box.attr('disabled', 'disabled')

How can I tell if the checkboxes are checked?

I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});

Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;

Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');

use the jquery :checked selector. http://api.jquery.com/checked-selector/

This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.

Removing an <option> from a <select> tag according to previously selected <option> tag? (POLL Example)for

I have 50 rows of data and i want users to give them points by 1 to 50. I put dropdown boxes near them with options 1/50. But all i want is when a user selects 15(for example) for a row, 15 will be deleted from all other select tags of other rows. I am not as good as you in JavaScript. How can i accomplish this?
Hi casablanca i couldnt make he script you sent work. I need it to work on just one select tag so i give select tag an ID and an ID for the form too. I edit the scripts getElementsByTagName with getElementsByTagID (select tag's ID) to effect only one select tag. But the function doesnt triggered?

This might not be a very good idea, because it is very difficult for the user to modify choices -- for example, if I want to give 15 to a different option, I need to change the old one to something else and then change the new one to 15. Also, once all points have been assigned, it's impossible to make any changes because all options are gone.
A better idea would be to let the user do whatever he/she wants and then validate the form in the end. You could do that like this:
function validate() {
var used = []; // This array stores already used options
var rows = document.getElementById('myForm').getElementsByTagName('select');
for (var i = 0; i < rows.length; i++) {
var points = rows[i].value;
if (used[points]) {
// This value was already used
alert('Please choose a different value.');
rows[i].focus();
return false;
} else {
// This value was not used before; mark it as used now
used[points] = true;
}
}
return true;
}
And call this function in the onsubmit handler of your form:
<form id="myForm" onsubmit="return validate();">

EDIT1: id -> class
give each option the class of the number it is
<option class="15">15</option>
<option class="16">16</option>
etc.
Then jquery can remove() an item by class
$('.15').remove();
obviously have to do an on change and get the value just set. "remove()" is nice in this instance because I believe it will yank every instance of that class.
EDIT3: upon further consideration the above method would be further complicated by the need to not remove the "selected" option. Not going to figure out the exact method but I think changing the class from "15" to "selected15" with a $(this).append() or something of the sort before calling the remove would get the job done fairly safely.
EDIT2:
As noted by casblanca below this is not an ideal user interface at all for this type of input. You may want to look into this: http://www.utdallas.edu/~jrb048000/ListReorder/
Allows user to drag and drop items in a list to reorder them. Much more natural.

multiple set of check box?

im having a set of multiple check bxes, like one set contain 3 check box share same name another set contain 3 check sharing same name . how can i get the value of these two different set of check box using a single code .
var form = $('usersurvey');
checkboxes = form.getInputs('checkbox');
for(count=0; count< checkboxes.length; count++){
if(checkboxes[count].checked){
retValue=true;
break;
}
}
return retValue;
}
im tried with this code but it fetch all the check boxes , i want only that have the same name, i used prototype.js

if you give each set of checkboxes a different class you could select them using jquery like:
$(".className").each(function(index, element) { ... });
for instance. somebody may be able to improve on this solution by selecting by name (i wasnt sure if you could do that, i always just select by class).
EDIT: sorry i should elaborate probably. the $(".className") piece will select all the checkboxes of class 'className'. since it sounds like you want to DO something with each of them though, i just added the each call on the end. inside the each call, you can define a function (shown) that will do something for each checkbox that was selected. reference the jquery each docs here:
http://api.jquery.com/each/

Single Choice Dropdown

I am building a form to rank series of items. The user will read the item and select in a dropdown the rating from 1 to 20. All 20 items will be displayed at the same time. What is the best way to make sure that the user didn't select the same number for more than one choice? Then I would display an error message, "You've already ranked an item as number 5"
Thanks

Put the items in a list with options to move an element up or down in the list.

I would suggest something like the following function. You may want to add something to revert the selection to some default value if it is a duplicate.
function checkDupe(element) {
var dupe = false;
$("select").each(function() {
if ($(this).attr("id") != $(element).attr("id") && $(this).attr("value") == $(element).attr("value")) {
dupe = true;
alert("You have already ranked an item number " + $(element).attr("value"));
return;
}
});
return dupe;
}
Just add that to the onchange event for all the dropdown lists like this.
<select id="a1" onchange="checkDupe(this)">
It's important to note that each list must have a unique ID.

There is a jquery plug-in for validation, that can help you define rules. It only works on submit, though but it'll still wont send the form and tell you which entry is wrong. Take a look at it, may be it can help you.