Question

我正在使用自定义jQuery插件将单选按钮转换为实际图像，并且它与基本复选框一起使用，但是当使用Cake的内置输入表单帮助程序时，它通过不取消选中已单击的选项而更像复选框。不仅如此，它还没有填充$ this-＆gt;数据（或在提交表单时发送任何内容）。

js看起来像这样：

//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala - dharmavir@gmail.com
// Date of Release: 13th March 10
// Version: 0.8
/*
 USAGE:
    $(document).ready(function(){
        $(":radio").behaveLikeCheckbox();
    }
*/

$(document).ready(function() {
    $("#bananas").dgStyle();
var elmHeight = "15";   // should be specified based on image size

// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
    dgStyle: function()
    {
        // Initialize with initial load time control state
        $.each($(this), function(){
            var elm = $(this).children().get(0);
            elmType = $(elm).attr("type");
            $(this).data('type',elmType);
            $(this).data('checked',$(elm).attr("checked"));
            $(this).dgClear();
        });
        $(this).mouseup(function() {
            $(this).dgHandle();
        });
    },
    dgClear: function()
    {
        if($(this).data("checked") == true)
        {
            $(this).addClass("checked");
        }
        else
        {
            $(this).removeClass("checked");
        }
    },
    dgHandle: function()
    {
        var elm =   $(this).children().get(0);
        if($(this).data("checked") == true)
            $(elm).dgUncheck(this);
        else
            $(elm).dgCheck(this);

        if($(this).data('type') == 'radio')
        {
            $.each($("input[name='"+$(elm).attr("name")+"']"),function()
            {
                if(elm!=this)
                    $(this).dgUncheck(-1);
            });
        }
    },
    dgCheck: function(div)
    {
        $(this).attr("checked",true);
        $(div).data('checked',true).addClass('checked');
    },
    dgUncheck: function(div)
    {
        $(this).attr("checked",false);
        if(div != -1)
            $(div).data('checked',false).css({
                backgroundPosition:"center 0"
            });
        else
            $(this).parent().data("checked",false).removeClass("checked");
    }
});

PHP / Html看起来像这样：

<span id="bananas-cat" class="cat">
    <?= $this->Form->radio('bananas',array(),array('legend' => false, 'id' => 'bananas', 'name' => 'category')); ?>
    <label for="bananas">Bananas</label>
</span>

虽然第一次检查时看起来可能正确，但点击后，$ this-＆gt;数据中没有任何内容传递，它就像一个复选框，并且在我添加其他单选复选框时不会取消选择该值。

虽然收音机功能在没有CakePHP的html表单助手的情况下可以正常工作：

<span id="animals-cat" class="cat">
    <input type="radio" name="category" id="animals" />
    <label for="animals">Animals</label>
</span>

如果有人能在这里帮助我，我将永远感激不尽。我一直试图解决这个问题太长时间了，因为我正在考虑废弃整个想法开始。

Answer 1

我建议查看并比较示例的HTML输出和CakPHP生成的HTML输出，尝试使其类似于示例，以便您可以使用自定义单选按钮。

但是如果你不能这样做，我强烈建议用一些参数覆盖这些助手，这样你就可以得到确切的HTML作为输出，Javascript应该完美无缺。

如果这对您不起作用，请告诉我。

使用CakePHP Form Helper的自定义jQuery单选按钮

1 个答案: