I can’t seem to get disabled true to work. Disabled false works great.
function selectall (pm) {
var messages= document.getElementById('pm');
if (checked == false)
{
checked = true;
document.getElementById('multiple_action').disabled = false;
document.getElementById('drop_button').setAttribute("class", "drop_button");
}
else
{
checked = false;
document.getElementById('multiple_action').disabled = true;
}
for (var i =0; i < messages.elements.length; i++)
{
messages.elements[i].checked = checked;
}
}
checked=false;
Have you tried
document.getElementById('multiple_action').disabled = "disabled";
Yeah, I tried that and it still fails.
Well the disabled = true should work provided that there isn’t something in the rest of the code to interfere with it so presumably the cause is elsewhere in the page.
That’s strange… There isn’t any other JS on the page. This is the only function in the entire JS file.
I’m wondering if they is a perception problem maybe the code to set disabled = true is never executed. Maybe selectall is only called once.
I notice you have
f
unction selectall (pm) {
var messages= document.getElementById('pm');
Your function has an argument pm but you use the literal ‘pm’.
AllanP
January 28, 2011, 11:42pm
7
It appears that you are not addressing the element correctly.
if (checked == false) can’t do anything because there is no object to work on.
The correct syntax for a checkable object (obj) is
On the other hand the checked referred to here may be a flag. It is difficult to help you without the code.
PhilipToop:
I’m wondering if they is a perception problem maybe the code to set disabled = true is never executed. Maybe selectall is only called once.
I notice you have
f
unction selectall (pm) {
var messages= document.getElementById('pm');
Your function has an argument pm but you use the literal ‘pm’.
I think select all is used more than once because it toggles the checkbox it just doesn’t toggle my button to disable when the select all is unchecked.
Here is the code…
function selectall (pm) {
var messages= document.getElementById('pm');
var i =0;
if (checked === false)
{
checked = true;
document.getElementById('multiple_action').disabled = false;
document.getElementById('drop_button').setAttribute("class", "drop_button");
}
else
{
checked = false;
document.getElementById('multiple_action').disabled = true;
}
for (i; i < messages.elements.length; i++)
{
messages.elements[i].checked = checked;
}
}
checked=false;
<form method="get" id="pm" name="pm" onsubmit="return false;">
<table class="messages">
<thead>
<tr>
<th class="box_column">
<label><input type="checkbox" onclick="selectall();" name="check_box_selector" /></label>
</th>
<th class="from_column">From</th>
<th class="subject_column">Subject</th>
<th class="time_column">Time Received</th>
<th class="actions_column">Actions</th>
</tr>
</thead>
<?php
$even_odd = true;
foreach ($messages as $message)
{
$even_odd = ($even_odd) ? false : true;
?>
<tr>
<td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm<?php echo $message['message_id']; ?>" /></label></td>
<td class="from_column">
<?php
$displayName = ucwords("${message['firstname']} ${message['lastname']}");
if (file_exists("assets/img/avatars/users/${message['from']}.png"))
{
echo "<img src=\\"/assets/img/avatars/users/${message['from']}.png\\" title=\\"${displayName}\\" alt=\\"${displayName}\\" />";
}
echo "<a href=\\"../u/${message['from']}\\" title=\\"Visit ${displayName}'s profile\\">${displayName}</a>";
?>
</a>
</td>
<td class="subject_column">
<a href="pm_box.php?box=<?php echo $_GET['box']; ?>&read=<?php echo $message['message_id']; ?>">
<?php
if(!empty($message['subject']))
{
echo $message['subject'];
}
else
{
echo "(No Subject)";
}
?>
</a>
</td>
<td class="time_column"><?php echo $message['time']; ?></td>
<td class="actions_column">
<?php
// if ($_GET['box'] == 1)
// {
// echo "
// <a href=\\"pm_send.php?to=${message['from']}\\">
// <img src=\\"assets/img/icons/reply.png\\" alt=\\"Reply\\" title=\\"Reply\\" />
// </a>
// ";
// }
?>
<a href="pm_box.php?box=<?php echo $_GET['box']; ?>&delete=<?php echo $message['message_id']; ?>"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
<div class="arr_down small" id="arr<?php echo $message['message_id']; ?>">
▼
<ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
<li style="display: block;">
<?php echo "<a href=\\"pm_send.php?to=${message['from']}\\" style=\\"padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;\\">Reply</a>";?>
</li>
<li style="display: block;">
<?php echo "<a href=\\"pm_send.php?forward=${message['message_id']}\\" style=\\"padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;\\">Forward</a>";?>
</li>
</ul>
</div>
</td>
</tr>
<?php
}
?>
</table><!--
<input type="button" onclick="SetAllCheckBoxes('pm', 'pmcheckbox', true);" value="All">
<input type="button" onclick="SetAllCheckBoxes('pm', 'pmcheckbox', false);" value="None">-->
<div class="form_footer" style="margin: 10px 0;">
<div class="pagination">
<span class="selected"><a href="pm_box.php?box=1">1</a></span>
<span><a href="pm_box.php?box=1">2</a></span>
...
<span><a href="pm_box.php?box=1">5</a></span>
</div>
<span id="drop_button" class="drop_button disabled">
<label>
<input type="submit" id="multiple_action" name="delete" class="invis dark_grey" disabled="disabled" value="Delete">
</label>
<span class="arr_down">▼</span>
</span>
</div>
</form>
You have different function names
onclick=“SetAllCheckBoxes(‘pm’, ‘pmcheckbox’, true);” value=“All”>
and
function selectall (pm)
PhilipToop:
You have different function names
onclick=“SetAllCheckBoxes(‘pm’, ‘pmcheckbox’, true);” value=“All”>
and
function selectall (pm)
The SetAllCheckBoxes was commented out. The function is called higher up in the code. Please look again
Sorry didn’t spot that. Could you clarify a few things for me.
As the code stands the input button should begin in an disabled state since it has an attribute disabled=“disabled”. Is that the case? Does it appearance suggest it is disabled, that is the style associated with the class is not making it look enabled when it is in fact disabled?
Presumably you then click the check_box_selector checkbox which turns it’s state to disabled=false. If you then click the check_box_selector checkbox again you would expect the state to go to disabled=true but the problem is that is not happening. Is that right?
Would it be possible to post the html code that the browser gets rather than the php that generates the html?
Put together the following html page from you php code and everything seems to work OK
<html>
<head>
<script type="text/javascript">
<!--
function selectall (pm) {
var messages= document.getElementById('pm');
var i =0;
if (checked === false)
{
checked = true;
document.getElementById('multiple_action').disabled = false;
document.getElementById('drop_button').setAttribute("class", "drop_button");
}
else
{
checked = false;
document.getElementById('multiple_action').disabled = true;
}
for (i; i < messages.elements.length; i++)
{
messages.elements[i].checked = checked;
}
}
checked=false;
// -->
</script>
</head>
<body>
<form method="get" id="pm" name="pm" onsubmit="return false;">
<table class="messages">
<thead>
<tr>
<th class="box_column">
<label><input type="checkbox" onclick="selectall();" name="check_box_selector" /></label>
</th>
<th class="from_column">From</th>
<th class="subject_column">Subject</th>
<th class="time_column">Time Received</th>
<th class="actions_column">Actions</th>
</tr>
</thead>
<tr>
<td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm1" /></label></td>
<td class="from_column">
<a href=\\"../u/a" title="Visit 's profile">Display name</a>
</a>
</td>
<td class="subject_column"><a href="pm_box.php?box=a&read=1">Subject</a></td>
<td class="time_column">09:00</td>
<td class="actions_column">
<a href="pm_box.php?amp;delete=1"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
<div class="arr_down small" id="arr1">
?
<ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
<li style="display: block;">
<a href="pm_send.php?to=a" style="padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;">Reply</a>"
</li>
<li style="display: block;">
<a href="pm_send.php?forward=b" style="padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;">Forward</a>"
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm1" /></label></td>
<td class="from_column">
<a href=\\"../u/a" title="Visit 's profile">Display name</a>
</a>
</td>
<td class="subject_column"><a href="pm_box.php?box=a&read=1">Subject</a></td>
<td class="time_column">09:00</td>
<td class="actions_column">
<a href="pm_box.php?amp;delete=1"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
<div class="arr_down small" id="arr1">
?
<ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
<li style="display: block;">
<a href="pm_send.php?to=a" style="padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;">Reply</a>"
</li>
<li style="display: block;">
<a href="pm_send.php?forward=b" style="padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;">Forward</a>"
</li>
</ul>
</div>
</td>
</tr>
</table>
<div class="form_footer" style="margin: 10px 0;">
<div class="pagination">
<span class="selected"><a href="pm_box.php?box=1">1</a></span>
<span><a href="pm_box.php?box=1">2</a></span>
...
<span><a href="pm_box.php?box=1">5</a></span>
</div>
<span id="drop_button" class="drop_button disabled">
<label>
<input type="submit" id="multiple_action" name="delete" class="invis dark_grey" disabled="disabled" value="Delete">
</label>
<span class="arr_down">?</span>
</span>
</div>
</form>
</body>
</html>
