Как отключить TextBox на стороне клиента, нажмите на CheckBox

Question

Как отключить asp:TextBox для client-side, нажмите HTML checkbox или на стороне сервера asp:CheckBox, используя JavaScript?

<script type="text/javascript" language="javascript">
    function enableTextbox() {
        // ?
    }
</script>

<table>
    <tr>
        <td>
            <input id="checkTake" onclick="enableTextbox" title="Take?" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="txtCommission" />
        </td>
    </tr>
</table>

Answer 1

Сложность в том, что ASP.NET назначает автоматически сгенерированные атрибуты id для всех элементов runat="server", включая ваш TextBox. Простое решение - «вставить» сгенерированный id в скрипт:

function enableTextbox() {
   var txtCommision = document.getElementById("<%= txtCommision.ClientID %>");
   txtCommision.disabled = !this.checked;
}

Если вы предпочитаете делать это без «типа спагетти-кода» - возможно, вы хотите, чтобы ваш JavaScript был в отдельном файле - вы можете избежать использования id для выбора поля <input>. Вместо этого вы можете украсить его class. В этом случае вы можете использовать какую-то библиотеку селекторов, чтобы найти элемент управления в JavaScript, популярным вариантом является jQuery.

Answer 2

<script type="text/javascript" language="javascript">
    function enableTextbox(checkbox) {
        document.getElementById('<%= txtCommission.ClientID %>').disabled = !document.getElementById(checkbox).checked;
    }
</script>

<table>
    <tr>
        <asp:CheckBox runat="server" ID="checkTake" onclick="enableTextbox(this.id)" Checked="true" Text="Take?" />
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="txtCommission" MaxLength="8" CssClass="right" />
        </td>
    </tr>
</table>

Answer 3

function enableTextbox() {
  document.getElementById("<%= txtCommision.ClientID %>").disabled = !document.getElementById("checkTake").checked;
};

Вам также нужно активировать enableTextbox:

<input id="checkTake" onclick="enableTextbox()" title="Take?" />

JQuery:

  $(document).ready(function () {
    $('#checkTake').bind('click', function () {
      $('#<%= txtCommission.ClientId %>').attr('disabled', !$(this).attr('checked'));
    });
  });