jquery – mostra textbox quando la casella di controllo selezionata

Ho questa forma

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

Ora come ora, sto usando questo codice jquery per mostrare textbox quando la casella di controllo selezionata.

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

Funziona bene, ma mostra tutte le caselle di testo quando è selezionata.

Qualcuno può aiutarmi a risolvere il problema?

Qui è il demo del mio problema.

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

OriginaleL’autore Giri | 2013-10-29

7 Replies
  1. 7

    Come divisori sono collocati accanto alle vostre caselle di controllo, è sufficiente utilizzare jQuery next() metodo per selezionare gli elementi corretti:

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

    Aggiornamento Codepen demo.

    Dalla documentazione (link qui sopra), il next() metodo seleziona:

    …immediatamente dopo, di parentela, di ogni elemento dell’insieme di corrispondenza di elementi. Se il selettore è fornito, recupera la successiva di pari livello solo se coincide con il selettore.

    Qui stiamo selezionando la prossima div.max_tickets elemento. Tuttavia nel tuo caso usando solo next() senza parametri, sarebbe sufficiente.

    OriginaleL’autore James Donnelly

  2. 3

    Assumendo markup rimarrà nello stesso ordine possono utilizzare next()

    jQuery(document).ready(function($) {
    
        $('input.maxtickets_enable_cb').change(function(){
                    $(this).next()[ this.checked ? 'show' : 'hide']();  
        }).change();
    });

    OriginaleL’autore charlietfl

  3. 1

    Modifica:

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

    :

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

    jsFiddle esempio qui

    OriginaleL’autore gibberish

  4. 1

    Forse provare a selezionare l’elemento successivo solo?

    modifica:

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

    :

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

    OriginaleL’autore samsquanch

  5. 1

    Mettere un div attraverso la vostra casella di controllo casella di testo e

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

    e sostituire il codice jquery con questo seguito,

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

    Ho testato e funziona.

    OriginaleL’autore jforjs

  6. 1

    Mentre non si può bisogno di una soluzione di JavaScript per altri motivi, vale la pena notare che questo può essere realizzato con puro CSS:

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

    JS Violino demo.

    O, con jQuery, l’approccio più semplice sembra essere:

    //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 Violino demo.

    Di riferimento:

    OriginaleL’autore David Thomas

  7. -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();
    }

    OriginaleL’autore madhuri

Lascia un commento