3

I am trying to disable or enable multiple inputs based on from a check box. I created a function to do it, but When I call the function more than once. It only changes the last function that is called.

demo http://jsfiddle.net/SM8Nx/1/

html

<input type="checkbox" name="state" id="state"><br>

First name: <input type="text" name="fname" id="fnamex"><br>
Middle name: <input type="text" name="mname" id="mnamex"><br>
Last name: <input type="text" name="lname" id="lnamex"><br>

js

function disable(action, affected) {
    if (document.getElementById(action).checked === false) {
        document.getElementById(affected).disabled = true;
    }

    document.getElementById(action).onclick = function () {
        if (document.getElementById(action).checked === true) {
            document.getElementById(affected).disabled = false;
        } else {
            document.getElementById(affected).disabled = true;
        }
    };
}


disable("state", "fnamex");
disable("state", "lnamex");
Improve this question
4
  • That's because you are overwriting the click event handler (document.getElementById(action).onclick) whenever you call the function. Commented Apr 9, 2013 at 18:05
  • plus you got action and affected backwards. You need to use document.getElementById(affected) Commented Apr 9, 2013 at 18:08
  • I update you fiddle jsfiddle.net/SM8Nx/3 Commented Apr 9, 2013 at 18:10
  • Another update :) Commented Apr 9, 2013 at 18:13

4 Answers 4

Reset to default
2

I made my own fiddle here: http://jsfiddle.net/SM8Nx/5/

Revamped some of your code, also, used classes.

function disable() {
    var elements = document.getElementsByClassName("d");
    document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
}

function doIt(elements, status) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].disabled = status;
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Here is a DEMO using addEventListener and attachEvent (for IE compatibility)..

function disable(action, affected) {
    var elem = document.getElementById(action),
        elemAffected = document.getElementById(affected);

    if (elem.checked === false) {
        elemAffected.disabled = true;
    }
    var handler = function () {
        if (elem.checked === true) {
            elemAffected.disabled = false;
        } else {
            elemAffected.disabled = true;
        }
    };
    if(elem.addEventListener) elem.addEventListener('click', handler);
    else elem.attachEvent('click', handler); // IE :(
}
Improve this answer

Comments

0

Use addEventListener to attach events to DOM elements.

document.getElementById(action).addEventListener('click', function () {
        if (document.getElementById(action).checked === true) {
            document.getElementById(affected).disabled = false;
        } else {
            document.getElementById(affected).disabled = true;
        }
    });

Note: For IE compatibility, you'll have to use attachEvent. https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener#Compatibility

Improve this answer

Comments

0 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> javascript Fuctions </TITLE>
<script language="JavaScript">
function copyCheckboxes(checkbx,priority, active, fDate, tDate){
                var idd=document.getElementById(checkbx).id;
if(document.getElementById(checkbx).checked==true){
                document.getElementById(priority+idd).disabled=false;
                document.getElementById(active+idd).disabled=false;
                document.getElementById(fDate+idd).disabled=false;
                document.getElementById(tDate+idd).disabled=false;
}else{
                document.getElementById(priority+idd).disabled=true;
                document.getElementById(active+idd).disabled=true;
                document.getElementById(fDate+idd).disabled=true;
                document.getElementById(tDate+idd).disabled=true;
}
}
</script>
</HEAD> 
<BODY>
<form method="post" action="tbl_row_delete.php" name="rowsDeleteForm">
  <table id="table_results" border="0" cellpadding="2" cellspacing="1">
    <!-- Results table headers -->
    <!-- Results table body -->
    <tr >
      <td width="16" align="center" valign="top" bgcolor="#D5D5D5">&nbsp; </td>
      <td align="right" valign="top"    bgcolor="#D5D5D5" class="nowrap">id</td>
      <td valign="top" bgcolor="#D5D5D5">rate</td>
      <td valign="top" bgcolor="#D5D5D5">priority</td>
      <td valign="top" bgcolor="#D5D5D5">active</td>
      <td valign="top" bgcolor="#D5D5D5">from_date</td>
      <td valign="top" bgcolor="#D5D5D5">to_date</td>
    </tr>
    <tr >
      <td width="16" align="center" valign="top" bgcolor="#D5D5D5"> <input type="checkbox" id="1" name="rows_to_delete1" onClick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"  />
      </td>
      <td align="right" valign="top"    bgcolor="#D5D5D5" class="nowrap">1</td>
      <td valign="top" bgcolor="#D5D5D5">50</td>
      <td valign="top" bgcolor="#D5D5D5"><select name="priority[]" id="priority1" disabled>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td valign="top" bgcolor="#D5D5D5"><select name="active[]" id="active1" disabled>
          <option value="Y" selected>Y</option>
          <option value="N">N</option>
        </select></td>
      <td valign="top" bgcolor="#D5D5D5"><input name="fromDate[]" type="text" id="fromDate1" value="01-02-2007" size="10" maxlength="10" disabled></td>
      <td valign="top" bgcolor="#D5D5D5"><input name="toDate[]" type="text" id="toDate1" value="01-02-2007" size="10" maxlength="10" disabled></td>
    </tr>
    <tr>
      <td width="16" align="center" valign="top" bgcolor="#E5E5E5"> <input type="checkbox" id="3" name="rows_to_delete3"  onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/>
      </td>
      <td align="right" valign="top"    bgcolor="#E5E5E5" class="nowrap">3</td>
      <td valign="top" bgcolor="#E5E5E5">50</td>
      <td valign="top" bgcolor="#E5E5E5"><select name="priority[]" id="priority3" disabled>
          <option value="1">1</option>
          <option value="2" selected>2</option>
          <option value="3">3</option>
        </select></td>
      <td valign="top" bgcolor="#E5E5E5"><select name="active[]" id="active3" disabled>
          <option value="Y" selected>Y</option>
          <option value="N">N</option>
        </select></td>
      <td valign="top" bgcolor="#E5E5E5"><input name="fromDate[]" type="text" id="fromDate3" value="01-02-2007" size="10" maxlength="10" disabled></td>
      <td valign="top" bgcolor="#E5E5E5"><input name="toDate[]" type="text" id="toDate3" value="01-02-2007" size="10" maxlength="10" disabled></td>
    </tr>
    <tr >
      <td width="16" align="center" valign="top" bgcolor="#D5D5D5"> <input type="checkbox" id="4" name="rows_to_delete4"  onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/>
      </td>
      <td align="right" valign="top"    bgcolor="#D5D5D5" class="nowrap">4</td>
      <td valign="top" bgcolor="#D5D5D5">10</td>
      <td valign="top" bgcolor="#D5D5D5"><select name="priority[]" id="priority4" disabled>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td valign="top" bgcolor="#D5D5D5"><select name="active[]" id="active4" disabled>
          <option value="Y" selected>Y</option>
          <option value="N">N</option>
        </select></td>
      <td valign="top" bgcolor="#D5D5D5"><input name="fromDate[]" type="text" id="fromDate4" value="01-02-2007" size="10" maxlength="10" disabled></td>
      <td valign="top" bgcolor="#D5D5D5"><input name="toDate[]" type="text" id="toDate4" value="01-02-2007" size="10" maxlength="10" disabled></td>
    </tr>
    <tr>
      <td width="16" align="center" valign="top" bgcolor="#E5E5E5"> <input type="checkbox" id="5" name="rows_to_delete5"  onclick="copyCheckboxes(this.id,'priority','active','fromDate','toDate');"/>
      </td>
      <td align="right" valign="top" bgcolor="#E5E5E5" class="nowrap">5</td>
      <td valign="top" bgcolor="#E5E5E5">50</td>
      <td valign="top" bgcolor="#E5E5E5"><select name="priority[]" id="priority5" disabled>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td valign="top" bgcolor="#E5E5E5"><select name="active[]" id="active5" disabled>
          <option value="Y" selected>Y</option>
          <option value="N">N</option>
        </select></td>
      <td valign="top" bgcolor="#E5E5E5"><input name="fromDate[]" type="text" id="fromDate5" value="01-02-2007" size="10" maxlength="10" disabled></td>
      <td valign="top" bgcolor="#E5E5E5"><input name="toDate[]" type="text" id="toDate5" value="01-02-2007" size="10" maxlength="10" disabled></td>
    </tr>
  </table> 
   </form>
</BODY>
</HTML>

More detail info refer http://www.easycodingclub.com/disabled-multiple-input-fields-using-javascript/javascript-tutorials/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.