禁用或启用多个输入

时间：2013-04-09 18:03:38

标签： javascript

我正在尝试根据复选框禁用或启用多个输入。我创建了一个函数来完成它，但是当我多次调用该函数时。它只会更改最后一个被调用的函数。

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

4 个答案:

答案 0 :(得分：1)

我在这里做了自己的小提琴：http://jsfiddle.net/SM8Nx/5/

修改了一些代码，也使用了类。

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;
    }
}

答案 1 :(得分：1)

Here is a DEMO使用addEventListener和attachEvent（用于IE兼容性）.. 

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

答案 2 :(得分：0)

使用addEventListener将事件附加到DOM元素。

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

注意：对于IE兼容性，您必须使用attachEvent。 https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener#Compatibility

答案 3 :(得分：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>

更多详细信息请参阅http://www.easycodingclub.com/disabled-multiple-input-fields-using-javascript/javascript-tutorials/

相关问题
最新问题