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 に答える