input box disable enabled using checkbox

Question

I have a form in that there is a input field and checkbox

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

Now i have a function

function handleChange(chk){
     var arr=chk.value.split('_');

     if(chk.checked == true){
        document.getElementsByName("t_c[arr[0]]").disabled = false;
      }else{
        document.getElementsByName("t_c[arr[0]]").disabled = true;
      }
  }

I want to disable corresponding input field on uncheck and enable when checked. but i am confuse how to use proper javascript syntax for getElementsByName("t_c[arr[0]]")

Possible duplicate of What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? — Sebastian Simon
– Sebastian Simon, Commented Mar 15, 2018 at 8:08
@sarkasronie It's used in checkboxes where it returns an array of selected items to the server — Udayraj Deshmukh
– Udayraj Deshmukh, Commented Mar 15, 2018 at 8:11

Ankit Agarwal · Accepted Answer · 2018-03-15 08:11:20Z

1

You can get the value of arr[0] after split to determine which input box needs to be enable or disable based on the value of the checkbox:

function handleChange(chk){
 var arr = chk.value.split('_');

 if(chk.checked){
    document.getElementsByName("t_c[]")[arr[0]].disabled = false;
  }else{
    document.getElementsByName("t_c[]")[arr[0]].disabled = true;
  }
}

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

answered Mar 15, 2018 at 8:11

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

31piy · Accepted Answer · 2018-03-15 08:11:28Z

The only problem with your code was that you need to get the element which is at the arr[0]th index of the result, which was given by getElementsByName.

Correcting that, your code works fine:

function handleChange(chk) {
  var arr = chk.value.split('_');

  if (chk.checked == true) {
    document.getElementsByName("t_c[]")[arr[0]].disabled = false;
  } else {
    document.getElementsByName("t_c[]")[arr[0]].disabled = true;
  }
}

<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">

<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">

<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

Krishna Devashish · Accepted Answer · 2018-03-15 08:21:22Z

Try this as it works fine and solves your problem, and if not yet then let me know.

function handleChange(chk) {
            var inputbox = document.getElementsByClassName("inputbox");
            var check = document.getElementsByClassName("check");

            for(i = 0; i < inputbox.length; i++) {
                if(check[i].checked == false) {
                    inputbox[i].disabled = true;
                }
                else {
                    inputbox[i].disabled = false;
                }
            }
        }

<input  type="text" name="t_c[]" class="inputbox"/>
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);"> 

<input  type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

Collectives™ on Stack Overflow

input box disable enabled using checkbox

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related