0

只需要在页面加载时禁用复选框并在用户选择要上传的文件时启用它们。例如，用户选择图像上传到桌面，以便启用桌面的大小。可能与javascript。

<html>
    <head>
        <title>Wallpaper Uploading Script</title>
    <style type="text/css">
        .formatting{
            font-family: Arial;
            font-size: .8em;
        }
        label{
            display: block;
            float: left;
            width: 150px;
            padding: 0 0px;
            margin: 0 0px 0;
            text-align: right;
        }
        form input, form textarea{
            margin: 2px 0 2px 2px;
        }
        .checkbox{
            text-align: left;
            display: block;
            padding: 2px;
        }
    </style>

    <script type="text/javascript">

    </script>
    </head>

    <body class="formatting">
        <p>Select a file to Upload: </p>
        <form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
            <fieldset>
                <label for="wall_name">Wall Name:</label>
                <input type="text" name="wall_name" size="50" /><br />
                <label for="thumbnail_path">Thumbnail path:</label>
                <input type="file" name="thumbnail_path" size="100" /><br />
                <label for="desktop_path">Desktop path:</label>
                <input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
                <label for="phone_path">Phone path:</label>
                <input type="file" name="phone_path" size="100" /><br />
                <label for="tablet_path">Tablet path:</label>
                <input type="file" name="tablet_path" size="100" /><br />
                <label for="desktop_dimension_id">Desktop dimensions:</label>
                <label class="checkbox" id="desktop_checkbox">
                    <input type="checkbox" name="1366x768"> 1366x768<br />
                    <input type="checkbox" name="1280x800"> 1280x800<br />
                    <input type="checkbox" name="1920x1080"> 1920x1080<br />
                    <span></span>
                </label>
                <label for="phone_dimensions_id">Phone dimensions:</label>
                <label class="checkbox" id="phone_checkbox">
                    <input type="checkbox" name="640x960"> 640x960<br />
                    <input type="checkbox" name="640x1136"> 640x1136<br />
                    <input type="checkbox" name="960x720"> 960x720<br />
                </label>
                <label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
                <label class="checkbox">
                    <input type="checkbox" name="1024x768"> 1024x768<br />
                    <input type="checkbox" name="2048x1536"> 2048x1536<br />
                </label>
            </fieldset>
            <br />
            <fieldset>
                <input type="submit" value="Upload Wall" />
                <input type="reset" value="Clear" />
            </fieldset>
        </form>
    </body>
    </html>
4

1 回答 1

1

这是我的解决方案。您可以在Jfiddle中查看它。

我使用的 javascript 依赖于 jQuery。你可以在下面看到它：

$(window).ready( function () {
    $('.desktopCB').attr('disabled', '');
    $('.phoneD').attr('disabled', '');
    $('.tabletD').attr('disabled', '');
});

$('#desktop_path').on('change', function () {
    $('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
    $('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
    $('.tabletD').removeAttr('disabled');
});
于 2013-10-23T00:40:27.547 回答