CODEWITHSUNDEEP
javascript
Dhairya Lakhera
Dhairya Lakhera

Reputation: 4808

input box disable enabled using checkbox

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

Upvotes: 2

Views: 58

Answers (3)

Krishna Devashish
Krishna Devashish

Reputation: 86

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

Upvotes: 0

31piy
31piy

Reputation: 23859

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

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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

Upvotes: 1

Related Questions