yiibooster wizard validation

Question

I have done a yiibooster wizard form, everything works perfectly BUT i want to force the customer to click in a TbExtendedGridView before he can do the next step.

In the form there are 2 TbExtendedGridView and 2 date fields.

Here is some code of the form:

    <?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'zf-contratos-form',
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    'enableAjaxValidation'=>false,
    'htmlOptions'=>array('class'=>'well'),
    'action' => array( '/ZfContratos/create' ),
)); ?>
    <div id="wizard-bar" class="progress progress-striped active">
    <div class="bar"></div>
    </div>
    <?php $this->widget(
    'bootstrap.widgets.TbWizard',
    array(
        'type' => 'tabs', // 'tabs' or 'pills'
        'pagerContent' => '<div style="float:right">
                    <input type="button" class="btn button-next" name="next" value="Siguiente" />
                </div>
                <div style="float:left">
                    <input type="button" class="btn button-previous" name="previous" value="Atrás" />
                </div>
                <br /><br />',
        'options' => array(
            'nextSelector' => '.button-next',
            'previousSelector' => '.button-previous',
            'onTabShow' => 'js:function(tab, navigation, index) {
                        var $total = navigation.find("li").length;
                        var $current = index+1;
                        var $percent = ($current/$total) * 100;
                        $("#wizard-bar > .bar").css({width:$percent+"%"});
            }',
            'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
        ),
        'tabs' => array(
            array(
                'label' => 'Arrendatarios',
                'content' => $this->renderPartial('//ZfContratos/_form_arrendatarios', array('model' => $model, 'form' => $form), true),
                'active' => true
            ),
            array('label' => 'Inmuebles', 'content' => $this->renderPartial('//ZfContratos/_form_inmuebles', array('model' => $model, 'form' => $form), true)),
            array('label' => 'Fecha', 'content' => $this->renderPartial('//ZfContratos/_form_contratos', array('model' => $model, 'form' => $form), true)),
        ),
    )
); ?>

<?php $this->endWidget(); ?>

The procedure would be, first step with "next" disable and when the customer clik on a row of the TbExtendedGridView "next" will be available and he can click on "next" to the next step.

Thank you so much.

CODE TESTED WORKING:

$cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
    $(window).load(function()
    { 
        alert('hello');
        $('#next').attr('disabled',true);
    });");
$cs->registerScript('button',"
        $('#arrendatario').click(function() 
        {
            $('#next').attr('disabled',false);
    });");

Answer 1

You can do this in Jquery. First you have to set Id of TbExtendedGridView. Next Button contains class next Then you do like this

<script type="text/javascript">
window.onload=function(){
$('.next').attr('disabled',true);
}
$(document).ready(
function()
{
   $('.grid-view').click(function() 
{
   $('.next').attr('disabled',false);
});
}
);
</script>

I have used class as selector but u can use use ID as selector as "#selector". You can also use jquery on child elements of grid-view. Above is just an example.
Here is some info about jquery selectors
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

EDIT: try

   <?php $cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
$(window).load(function()
{ 
    alert('hello');
}
)");
?>

If this works then copy the whole code in this script.