使用带有 CakePHP 表单助手的自定义 jQuery 单选按钮答案

【问题标题】：Using custom jQuery radio buttons with CakePHP Form Helper使用带有 CakePHP 表单助手的自定义 jQuery 单选按钮
【发布时间】：2011-12-16 08:59:21
【问题描述】：

我正在使用自定义 jQuery 插件将单选按钮转换为实际图像，它适用于基本复选框，但是当使用 Cake 的内置输入表单助手时，它更像是一个复选框，不会取消选中已单击的选项.不仅如此，它还没有填充 $this->data（或在提交表单时发送任何内容）。

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->data 中没有传递任何内容，它就像一个复选框，并且在我添加一个额外的单选复选框时不会取消选择该值。

虽然收音机功能在没有 CakePHP 的 html 表单帮助器的情况下也能像这样工作：

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

如果有人可以在这里帮助我，我将永远感激不尽。我已经尝试解决这个问题太久了，现在我正在考虑从一开始就放弃整个想法。

【问题讨论】：

也发布来自$this->Form->radio 调用的HTML 输出。您不需要对所有事情都使用表单助手 - 手动创建单选按钮，使用蛋糕约定 data[Model][field] 命名字段并使用您的自定义 JS - 完成工作。
类似的事情发生在我身上，问题是 cakephp 约定中的名称有 [] 并且需要为 input[name='"+$(elm).attr("name")+"']part 转义，希望这对你有用
@Ross 我尝试恢复到正常方法并将data[Submission][category] 放在名称字段中，但是当它发布数据时，它看起来像category => on。不知道那个“开”是从哪里来的。
@api55 你到底逃了什么？你能分享一个例子吗？
当然，我把 [] 字符转义了，最后你会得到类似"$(input[@name='data\\[Model\\]\\[radioName\\]']:radio").change 是的，一堆斜线，但没有它就不行

标签： javascript jquery forms cakephp checkbox

【解决方案1】：

我的建议是查看并比较 example 的 HTML 输出和由 CakPHP 生成的 HTML 输出，尝试使其与 example 相似，以便您可以使自定义单选按钮正常工作。

但是，如果您不能这样做，我强烈建议您通过一些参数覆盖这些帮助程序，以便您可以获得准确的 HTML 作为输出，并且 Javascript 应该可以完美地工作。

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

【讨论】：