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?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, Mar 15 '18 at 08:08
@sarkasronie It's used in checkboxes where it returns an array of selected items to the server — Udayraj Deshmukh, Mar 15 '18 at 08:11

score 1 · Answer 1 · answered Mar 15 '18 at 08:11

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);">

score 1 · Answer 2 · answered Mar 15 '18 at 08:11

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);">

score 0 · Answer 3 · answered Mar 15 '18 at 08:21

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);">

input box disable enabled using checkbox

3 Answers3