Enabled and disabled checkbox using javascript

Question

This is my checkbox and text box:

<td> <input type ="checkbox" id="haha" onclick="enable('<?php echo $agenda->id; ?>')" value=<?php echo $agenda->id; ?>>

<td> <input type="text" name="dnama" id="nama_<?php echo $agenda->id; ?>" value="<?php echo $agenda->nama; ?>" disabled /> </td>
<td> <input type="text" name="dketer" id="ket_<?php echo $agenda->id; ?>" value="<?php echo $agenda->keterangan; ?>" disabled> </td>

and here's my javascript:

function enable(id) {
var disabled = !document.getElementById('haha').checked;
document.getElementById("nama_"+id).disabled = disabled;
document.getElementById("ket_"+id).disabled = disabled; }

my question is why this is only works on first row, i checked first checkbox the textbox will be enabled and then i unchecked first checkbox and checked 2nd and others that textbox still disabled.. how can i fix this?

"why this is only workds on first row", id's are unique if you more than checbox with the same id #haha it will work for the first one. — elreeda
– elreeda, Commented Apr 16, 2016 at 7:05
yeah thanks. you're right my checkbox has the same id #haha but different values. how can i fix that? i tried getElementByid('haha').value, but it can't work. — Bobby Pratama
– Bobby Pratama, Commented Apr 16, 2016 at 7:13
Please edit your question into a snippet (click the [<>] button) and remove all PHP since it is irrelevant to the question and actually looks like you need to fix the ID handling — mplungjan
– mplungjan, Commented Apr 16, 2016 at 7:13
If it has same id rather than ID, pass this object and get the value and then get id and pass to dependent elements for it id. — Suresh
– Suresh, Commented Apr 16, 2016 at 7:22

Reto · Accepted Answer · 2016-04-16 07:27:18Z

1

You could use just one function:

function toggle(someId) {
    document.getElementById(someId).disabled = !document.getElementById(someId).disabled;
}

answered Apr 16, 2016 at 7:27

Reto

1,3531 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2016-04-16 07:19:20Z

0

You want the following:

function testEna() { 
  var dis = this.checked;
  document.getElementById("nama"+this.id).disabled=dis;
  document.getElementById("ket"+this.id).disabled=dis;
}
window.onload=function() {
  var ena = document.querySelectorAll(".enabler");
  for (var i=0;i<ena.length;i++) {
    ena[i].onclick=testEna;
    ena[i].onclick(); // run now too
  }
}

using

<input type="checkbox" class="enabler" id="<?php echo $agenda->id; ?>" />

<input type="text" name="dnama" id="nama_<?php echo $agenda->id; ?>" value="<?php echo $agenda->nama; ?>"/>
<input type="text" name="dketer" id="ket_<?php echo $agenda->id; ?>" value="<?php echo $agenda->keterangan; ?>"/>

answered Apr 16, 2016 at 7:19

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Arizona2014 · Accepted Answer · 2016-04-16 07:19:56Z

0

I don't know your ID's but the disable and enable checkbox code is like this :

function enable() {
    document.getElementById("some_id").disabled= false;

}

function disable() {
    document.getElementById("some_id").disabled= true;
}

answered Apr 16, 2016 at 7:19

Arizona2014

1,3472 gold badges18 silver badges33 bronze badges

1 Comment

mplungjan Over a year ago

He used the checked boolean of the checkbox correctly

Kamalakar · Accepted Answer · 2016-04-16 07:45:28Z

0

try this..

function EnableDisable(id) {
document.getElementById("nama_"+id).disabled =false;
document.getElementById("ket_"+id).disabled = false;
var disabled = !document.getElementById('haha').checked;
document.getElementById("nama_"+id).disabled = disabled;
document.getElementById("ket_"+id).disabled = disabled; }

answered Apr 16, 2016 at 7:45

Kamalakar

4454 silver badges9 bronze badges

Comments

Ravi Patel · Accepted Answer · 2016-04-16 07:47:00Z

0

I don't know you question exactly, But it's good to use jQuery for this. I have try something with this. See below jsfiddel link

jsfiddle.net/ravipateldhg/5c7rdt0a

edited Apr 16, 2016 at 7:47

answered Apr 16, 2016 at 7:36

Ravi Patel

7631 gold badge7 silver badges22 bronze badges

Comments

Suresh · Accepted Answer · 2016-04-16 07:53:52Z

0

As you said you are using same id twice .With out changing id u can use this. But u should update the parament i.e Rather than passing id you should pass this object

function enable(pobj) {
var id = pobj.value;
var disabled = !pobj.checked;
document.getElementById("nama_"+id).disabled = disabled;
document.getElementById("ket_"+id).disabled = disabled;
}

Preferably usage of same id is not recommended.

For reference you can check https://jsfiddle.net/uw5f001q/3/

edited Apr 16, 2016 at 7:53

answered Apr 16, 2016 at 7:33

Suresh

9331 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Enabled and disabled checkbox using javascript

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related