Question

我有一个带有输入字段框的表单。我使用了一个可以使用它上面的按钮增加或减少的微调器。我需要在一定限度内使用id微调器输入字段的值（如1-31））（即，我们不能通过使用jquery或ajax来减少低于1的值并通过单击微调器按钮增加到31以上）。我应该怎么做？请帮助我。我的代码如下。

spinner.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Spinner - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/
              jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="style.css">
        <script>
            $(function() {
                var spinner = $( "#spinner" ).spinner();
                $( "#disable" ).click(function() {
                    if ( spinner.spinner( "option", "disabled" ) ) {
                        spinner.spinner( "enable" );
                    } else {
                        spinner.spinner( "disable" );
                    }
                });
                $( "#destroy" ).click(function() {
                    if ( spinner.data( "ui-spinner" ) ) {
                        spinner.spinner( "destroy" );
                    } else {
                        spinner.spinner();
                    }
                });
                $( "#getvalue" ).click(function() {
                    alert( spinner.spinner( "value" ) );
                });
                $( "#setvalue" ).click(function() {
                    spinner.spinner( "value", 5 );
                });
                $( "button" ).button();
            });

        </script>
    </head>
    <body>
        <p>
            <label for="spinner">Select a value:</label>
            <input id="spinner" name="value">
        </p>
        <p>
            <button id="disable">Toggle disable/enable</button>
            <button id="destroy">Toggle widget</button>
        </p>
        <p>
            <button id="getvalue">Get value</button>
            <button id="setvalue">Set value to 5</button>
        </p>
    </body>
</html>

Answer 1

创建微调器时设置最小值和最大值。要动态更改它们，请使用：

//给出一个来自AJAX的'data'对象，键'min'和'max'：

$('#spinId').spinner('option', 'min', data.min);

$('#spinId').spinner('option', 'max', data.max);

另请注意， .attr（）函数只能用于获取和设置DOM元素的属性。

例如，您可以使用它来获取或设置元素的id或元素的href。

大多数jQuery插件都将其配置保存在JavaScript变量中。

如果他们确实将配置附加到DOM，则使用 .data（）。

希望这会有所帮助..

<强>更新

上面的代码段是JavaScript而不是HTML代码。

将max和min替换为您想要限制的值。

例如，如果您想限制在1到31之间：那么：

  $('#spinId').spinner('option', '1', data.min);

  $('#spinId').spinner('option', '31', data.max);

更新2：

<script>
        $(function() {
            var spinner = $( "#spinner" ).spinner();
           $('#spinner').spinner('option', '1', data.min);
            $('#spinner').spinner('option', '31', data.max);

            $( "#disable" ).click(function() {
                if ( spinner.spinner( "option", "disabled" ) ) {
                    spinner.spinner( "enable" );
                } else {
                    spinner.spinner( "disable" );
                }
            });
            $( "#destroy" ).click(function() {
                if ( spinner.data( "ui-spinner" ) ) {
                    spinner.spinner( "destroy" );
                } else {
                    spinner.spinner();
                }
            });
            $( "#getvalue" ).click(function() {
                alert( spinner.spinner( "value" ) );
            });
            $( "#setvalue" ).click(function() {
                spinner.spinner( "value", 5 );
            });
            $( "button" ).button();
        });

    </script>

限制微调器字段中的值

1 个答案: