3

我有这个表格

<form action="">
  <div id="opwp_woo_tickets">
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
  </div>
</form>

截至目前，我正在使用此 jquery 代码在选中复选框时显示文本框。

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
        if ($(this).is(':checked')) $('div.max_tickets').show();
        else $('div.max_tickets').hide();
    }).change();
});

它工作正常，但在选中时会显示所有文本框。

有人可以帮我解决吗？

这是我的问题的演示。

http://codepen.io/mistergiri/pen/spBhD

4

7 回答 7

7

由于您的分隔线放置在您的复选框旁边，您只需要使用jQuery 的next()方法来选择正确的元素：

if ($(this).is(':checked'))
    $(this).next('div.max_tickets').show();
else
    $(this).next('div.max_tickets').hide();

更新了 Codepen 演示。

从文档（上面链接）中，该next()方法选择：

...匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

这里我们选择下一个div.max_tickets元素。但是，在您的情况下，仅使用next()不带参数就足够了。

于 2013-10-29T22:26:32.920 回答
3

假设标记将保持相同的顺序可以使用next()

jQuery(document).ready(function($) {

    $('input.maxtickets_enable_cb').change(function(){
                $(this).next()[ this.checked ? 'show' : 'hide']();  
    }).change();
});
于 2013-10-29T22:29:10.930 回答
1

也许尝试只选择下一个元素？

改变：

if ($(this).is(':checked')) $('div.max_tickets').show();

到：

if ($(this).is(':checked')) $(this).next('div.max_tickets').show();
于 2013-10-29T22:29:26.353 回答
1

改变：

if ($(this).is(':checked')) $('div.max_tickets').show();

到：

if ($(this).is(':checked')) $(this).next('div.max_tickets').show();

jsFiddle 示例在这里

于 2013-10-29T22:29:33.867 回答
1

虽然您可能出于其他原因需要 JavaScript 解决方案，但值得注意的是，这可以通过纯 CSS 来实现：

input + div.max_tickets {
    display: none;
}

input:checked + div.max_tickets {
    display: block;
}

JS 小提琴演示。

或者，使用 jQuery，最简单的方法似乎是：

// binds the change event-handler to all inputs of type="checkbox"
$('input[type="checkbox"]').change(function(){
    /* finds the next element with the class 'max_tickets',
       shows the div if the checkbox is checked,
       hides it if the checkbox is not checked:
    */
    $(this).next('.max_tickets').toggle(this.checked);
// triggers the change-event on page-load, to show/hide as appropriate:
}).change();

JS 小提琴演示。

参考：

于 2013-10-29T22:33:32.567 回答
1

在您的复选框和文本框上放置一个 div

<form action="">
<div id="opwp_woo_tickets">
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
</div>
</div>
</form>

并将您的 jquery 代码替换为下面的代码，

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
       if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
       else $(this).parent().children('div.max_tickets').hide();
   }).change();
});

我已经对其进行了测试，并且可以正常工作。

于 2013-10-29T22:52:57.573 回答
-1 
protected void EnableTextBox()
{
    int count = int.Parse(GridView1.Rows.Count.ToString());

    for (int i = 0; i < count; i++)
    {
        CheckBox cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");
        CheckBox cb1 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox2");
        CheckBox cb2 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox3");
        TextBox tb = (TextBox)GridView1.Rows[i].Cells[4].FindControl("txtration");
        TextBox tb1 = (TextBox)GridView1.Rows[i].Cells[5].FindControl("txtjob");
        TextBox tb2 = (TextBox)GridView1.Rows[i].Cells[6].FindControl("txtaadhar");            

        if (cb.Checked == true)
        {
            tb.Visible = true;               
        }
        else
        {
            tb.Visible = false;    
        }

        if (cb1.Checked == true)
        {
            tb1.Visible = true;                
        }
        else
        {
            tb1.Visible = false;              
        }

        if (cb2.Checked == true)
        {
            tb2.Visible = true;               
        }
        else
        {
            tb2.Visible = false;
        }
    }
}

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    EnableTextBox();
}
于 2014-12-19T09:54:20.693 回答