Это решение протестировано и работает с использованием только JavaScript (для этого решения jQuery не требуется!) .
1. Часть C # (In Page_Load Метод)
В Page_Load нам нужно добавить небольшой хак:
foreach(GridViewRow row in YourGridViewControlID.Rows)
{
if (row.RowType == DataControlRowType.DataRow )
{
((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
}
}
Таким образом, мы добавляем вызов функции JavaScript к событию OnChange каждого CheckBox нашего GridView. Что особенного, и мы не можем достичь с помощью HTML, так это то, что мы передаем Row Index каждого из них в функции JavaScript, что нам понадобится позже.
2. Некоторые важные заметки для части HTML
Убедитесь, что и Checkbox control, и Textbox control, но , что более важно ваш GridView Control имеет статический идентификатор, используя ClientIDMode="Static", как показано ниже:
<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />
И для GridView управления:
<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">
3. Часть Javascript
А затем в вашем файле JavaScript / код:
function TextboxAutoEnableAndDisable(Row) {
// Get current "active" row of the GridView.
var GridView = document.getElementById('YourGridViewControlID');
var currentGridViewRow = GridView.rows[Row + 1];
// Get the two controls of our interest.
var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
// If the clicked checkbox is unchecked.
if( rowCheckbox.checked === false) {
// Empty textbox and make it disabled
rowTextBox.value = "";
rowTextBox.disabled = true;
return;
}
// To be here means the row checkbox is checked, therefore make it enabled.
rowTextBox.disabled = false;
}
4. Некоторые примечания для вышеуказанной реализации
- Обратите внимание, что в коде JavaScript в строке:
var currentGridViewRow = GridView.rows[Row + 1];
[Row + 1] важен для этой работы и не должен меняться.
- И наконец:
следующие строки:
var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
Возможно, .cells[2] и .cells[0] для вас различны, поэтому вы должны выбрать правильный номер в [].
Обычно это номер столбца вашего GridView, начиная с 0.
Так что, если ваш CheckBox был в первом столбце GridView, тогда вам нужно .cells[0].
Если ваш TextBox находится во втором столбце вашего GridView, то вам нужно .cells[1] (в моем случае выше, TextBox было в третьем столбце моего GridView и, следовательно, я использовал .cells[2])