asked on

Javascript Checkbox Toggle making me go grey...

Hello,

I've been strugling with this now for hours, I just can't get it to work; what I have is -

A checkbox
A textfield

Rule should be -

When checkbox checked or checkbox.value = Y
Textfield Disabled

When checkbox NOT checked or checkbox.value NOT Y
Textfield Enabled

Should be able to toggle between the two by checking / unchecking...

My checkbox textfield combo pair are -

<tr>
        <td class="fixedleftwidth">Carriage Included (Y/N)</td>
        <td><input name="procrriageinc" type="checkbox" disabled="disabled" id="procrriageinc" onclick="Disable_Pro_Special_Carriage(this.checked)" value="Y"/></td>
      </tr>
      <tr class="alternativerowtr">
        <td class="fixedleftwidth">Carriage Rate (If Not Included)</td>
        <td><input name="procarriagerate" type="text" id="procarriagerate" value="0.00" /></td>
      </tr>

Open in new window

My javascript contains over rules, ALL listed in bottom code segment, but the ones in particular affecting this are -

function Disable_Pro_Special_Carriage(status)
{
if(document.getElementById('procarriagerate').disabled  = 'true')
document.getElementById('procarriagerate').disabled  = 'false';
else
document.getElementById('procarriagerate').disabled  = 'true';
}

Open in new window

Currently what happens is,

First time checkbox is checked, the textfield is disabled, subsequently nothing happens for each additional click....

HELP

TY

window.onload = function resettoggle() {
var e = document.getElementById('ULSpecialDescriptionTGI');
e.style.display = 'none';
var e = document.getElementById('ULSpecialDescriptionPro');
e.style.display = 'none';
var e = document.getElementById('Pro-Direct-Special-Header');
e.style.display = 'none';
var e = document.getElementById('TGI-Direct-Special-Header');
e.style.display = 'none';

var e = document.getElementById('TGI-Direct-Pricing-Wrapper');
e.style.display = 'none';
var e = document.getElementById('TGI-Direct-Carriage-Wrapper');
e.style.display = 'none';
var e = document.getElementById('PRO-Direct-Pricing-Wrapper');
e.style.display = 'none';
var e = document.getElementById('PRO-Direct-Carriage-Wrapper');
e.style.display = 'none';
}

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

function Disable_Pro_Special_Carriage(status)
{
if(document.getElementById('procarriagerate').disabled  = 'true')
document.getElementById('procarriagerate').disabled  = 'false';
else
document.getElementById('procarriagerate').disabled  = 'true';
}
function Disable_TGI_Special_Carriage()
{
if(document.getElementById('tgicarriagerate').disabled  = 'true')
document.getElementById('tgicarriagerate').disabled  = 'false';
else
document.getElementById('tgicarriagerate').disabled  = 'true';
}

function enable_text(status)
{
status=!status; 
document.getElementById('normalproprice').disabled = status;
document.getElementById('specialpro').disabled = status;
document.getElementById('procrriageinc').disabled = status;
}

function enable_TGI_text(status)
{
status=!status; 
document.getElementById('normaltgiprice').disabled = status;
document.getElementById('specialtgi').disabled = status;
document.getElementById('tgicrriageinc').disabled = status;
}


function enable_TGI_Special_Offer(status)
{
status=!status; 
document.getElementById('displayspecialpricetgi').disabled = status;
document.getElementById('displayspecialdesctgi').disabled = status;

}

function enable_PRO_Special_Offer(status)
{
status=!status; 
document.getElementById('displayspecialpricepro').disabled = status;
document.getElementById('displayspecialdescpro').disabled = status;

}

function enable_TGI_Special_Price(status)
{
status=!status; 
document.getElementById('saletgiprice').disabled = status;
}

function enable_PRO_Special_Price(status)
{
status=!status; 
document.getElementById('saleproprice').disabled = status;
}

Open in new window

stalhw

display='block';
can't be used for everything try using this instead:
.display='';

stalhw

but that's not your problem...
I'm curious, since your checkbox is DISABLED, how do you expect people to check/uncheck it ?

I must say I was lazy and didn't go through all your JS code, but something as simple as the following should work:

<tr>
        <td class="fixedleftwidth">Carriage Included (Y/N)</td>
        <td><input name="procrriageinc" type="checkbox" id="procrriageinc" onclick="if (this.checked) { this.form.procarriagerate.disabled=falsel } else { this.form.procarriagerate.disabled=true; }" value="Y"/></td>
      </tr>
      <tr class="alternativerowtr">
        <td class="fixedleftwidth">Carriage Rate (If Not Included)</td>
        <td><input name="procarriagerate" type="text" id="procarriagerate" value="0.00" /></td>
      </tr>

Open in new window

But I don't undestand why you are saying if 'checked' OR if value='Y'
The value won't change when you check/uncheck so from your own logic, nothing whould happen when you check/uncheck since the value won't change...
Please explain...

garethtnash

ASKER

Thanks stalhw,

two questions, -

Can I include the later script in an external javascript page?

AND

'display='block';
can't be used for everything try using this instead:
.display='';' - Why?

Thank you

stalhw

You could but you would have to pass variables to it...

but looking back at your code:
function Disable_Pro_Special_Carriage(status)
{
if(document.getElementById('procarriagerate').disabled = 'true')
document.getElementById('procarriagerate').disabled = 'false';
else
document.getElementById('procarriagerate').disabled = 'true';
}

Why are you passing a variable 'status' (checked true or not) but then you are not using it...
anyway the error in that code is:
if(document.getElementById('procarriagerate').disabled = 'true')
it should be ==
if(document.getElementById('procarriagerate').disabled == 'true')
or much simpler:
if(document.getElementById('procarriagerate').disabled)

For the 'block' well it's from experience...
Some html elements don't support display='block' but if it's working for your application, forget what I said.... ( example: can't have a TR display:block, and I'm pretty sure there was others, but can't remember)

garethtnash

ASKER

umm...

Why are you passing a variable 'status' (checked true or not) but then you are not using it...

So how do I use it? or should I remove it?

thanks

stalhw

well it depends...
if your checkbox is 'DISABLED' the status will never change, so you actually don't need to pass this.checked to your function... but it's not a problem, so keep using your code, just replace the = with == in you IFs

garethtnash

ASKER

Hello,

I had that previously, it didn't work :(

Is it best to go with your first suggestion?

Thanks

ASKER CERTIFIED SOLUTION

stalhw

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

garethtnash

ASKER

Sorry about the delayed response, that has worked beautifully, thank you