javascript - disable or enable multiple inputs

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 /

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>

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

demo http://jsfiddle/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>

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

Share asked Apr 9, 2013 at 18:03 Daniel 4,35212 gold badges52 silver badges69 bronze badges

That's because you are overwriting the click event handler (document.getElementById(action).onclick) whenever you call the function. – Felix Kling Commented Apr 9, 2013 at 18:05
plus you got action and affected backwards. You need to use document.getElementById(affected) – Jeff Shaver Commented Apr 9, 2013 at 18:08
I update you fiddle jsfiddle/SM8Nx/3 – Hackerman Commented Apr 9, 2013 at 18:10
Another update :) – fernandosavio Commented Apr 9, 2013 at 18:13

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

I made my own fiddle here: http://jsfiddle/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;
    }
}

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

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 :(
}

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 patibility, you'll have to use attachEvent. https://developer.mozilla/en-US/docs/DOM/EventTarget.addEventListener#Compatibility

<!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./disabled-multiple-input-fields-using-javascript/javascript-tutorials/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - disable or enable multiple inputs - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)