Question

我在Yii项目视图中激活了我的js文件：

<?php
/* Register javascript */
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/showHide.js');
?>

仍然在我看来，我有一个名为'tbo_sk'的复选框和名为'nilaiblksk'的textField

<?php echo $form->checkBox($model, 'tbo_sk'); ?>
<div style="display: none"><?php echo $form->textField($model, 'nilaiblksk'); ?></div>

我的问题是，我们如何在showHide.js文件中创建javascript代码，每当我检查checkBox时显示textField，否则如果未选中则隐藏textField？

在我的div标签中，我使用style =“display：none”来隐藏textField。

提前致谢！

Answer 1

最好给你的div一个ID或Class，而不是在jQuery中使用parent（）：

<div id="hiddenDiv" style="display: none"><?php echo $form->textField($model, 'nilaiblksk'); ?></div>

<script>
$(document).ready(function(){
    $('#MODELNAME_tbo_sk').change(function(){
        $('#hiddenDiv').toggle(); // or do $('#MODELNAME_nilaiblksk').parent().toggle();
    });
});
</script>

Answer 2

然后视图文件添加以下代码：

在文档准备切换输入上注册jquery函数：

$buttonToggler= <<<JS
    toggleInput=function(src,inputName){
      if(src.checked){
        $(src.form[inputName]).removeProp('disabled');
       }else{
         $(src.form[inputName]).prop('disabled','disabled');
       }
    }
JS;
Yii::app()->clientScript->registerScript('toggleFormInputs',$buttonToggler, CClientScript::POS_READY);

向复选框更改事件添加功能：

echo $form->checkBox($model,'tbo_sk',
      array('onchange'=>'js:toggleInput(this,"ModelName[nilaiblksk]")'));

echo $form->textField($model,"nilaiblksk");

你必须更换实际的型号名称，例如“ModelName [nilaiblksk]”，例如对于帖子模型，它将是“Post [nilaiblksk]”，无论你使用的是什么模型。

还有一件事，你必须改变toggleInput函数，例如你可能只想让它成为只读或添加删除css类

如何在Yii javascript中使用checkBox隐藏或显示textField

2 个答案: