Question

任何熟悉：disable_with选项的人都知道它会在点击时调整大小以容纳输入按钮的新文本。无论按钮的新内容如何，我都希望按钮保持原始大小。有人知道这样做的方法吗？

由于

Answer 1

当您使用:disable_with选项时，您正在使用Rails Unobtrosive Javascript驱动程序jquery-ujs，因为Rails 3.1在此处调用data-disable-with数据处理程序：

/**
 * disable-with handlers
 */
var disable_with_input_selector = 'input[data-disable-with]';
var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')';

$(disable_with_form_selector).live('ajax:before', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.data('enable-with', input.val())
             .attr('value', input.attr('data-disable-with'))
             .attr('disabled', 'disabled');
    });
});

$(disable_with_form_selector).live('ajax:complete', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.removeAttr('disabled')
             .val(input.data('enable-with'));
    });
});

如果您注意到，此处没有任何重新调整按钮的大小。扩展很可能是由额外的文本引起的，虽然它可能是由附加到disabled属性的一些默认jQuery CSS引起的（我实际上没有检查过，但这似乎不太可能）。我建议编写严格的CSS规则，以防止盒子重新调整大小或做任何你不喜欢的事情。无论哪种方式，这都将解决您的问题。

Answer 2

CS片段，用于在保存时保持按钮宽度相同：

btn = 'input[data-disable-with]'
frm = 'form[data-remote]:has(' + btn + ')'

$(frm).on 'ajax:before', ->
    $(@).find(btn).each ->
        input = $(@)
        input.css('width', input.css('width'))

$(frm).on 'ajax:complete', ->
    $(@).find(btn).each ->
        $(@).css('width', '')

感谢大奖。

：disable_with但不调整大小

2 个答案: