Question

我想制作一个电影院座位购买系统，我没有服务器来运行这个项目。

我想尝试使用其他文档（例如：MS Access数据库）来收集结果。

如何在用户提交选项后禁用该复选框？这是我的复选框表格：

<form>  
<ol class="seats" type="A">
    <li class="seat">
      <input type="checkbox" id="1A" />
      <label for="1A">1A</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1B" />
      <label for="1B">1B</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1C" />
      <label for="1C">1C</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1D" />
      <label for="1D">1D</label>
    </li>
    <li class="seat">
      <input type="checkbox"  disabled id="1E" />
      <label for="1E">Occupied</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1F" />
      <label for="1F">1F</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1G" />
      <label for="1G">1G</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1H" />
      <label for="1H">1H</label>
    </li>
  </ol>
</form>

Answer 1

如何在用户选择后将复选框更改为禁用复选框？

你可以做一些基本的事情：

<input type="checkbox" onclick="this.disabled = true"/>

但后来我想知道如果错过了，用户将取消选中一个复选框 - 可能有一个重置按钮：）

＆＃13;

function reset() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      checkboxes[i].disabled = false;
      checkboxes[i].checked = false;
    }
  }
}

document.getElementById('reset').addEventListener('click', reset);

＆＃13;

<form>
  <button type="button" id="reset">Reset Selection</button>
  <ol class="seats" type="A">
    <li class="seat">
      <input type="checkbox" id="1A" onclick="this.disabled = true" />
      <label for="1A">This will be disabled after click</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1B" />
      <label for="1B">1B</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1C" />
      <label for="1C">1C</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1D" />
      <label for="1D">1D</label>
    </li>
    <li class="seat">
      <input type="checkbox" disabled id="1E" />
      <label for="1E">Occupied</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1F" />
      <label for="1F">1F</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1G" />
      <label for="1G">1G</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1H" />
      <label for="1H">1H</label>
    </li>
  </ol>
</form>

＆＃13;

Answer 2

您可以遍历所有复选框并添加eventlistener（在您的情况下为change）。不是在激活事件时禁用复选框。

这是一个非常简单的解决方案：

请记住，这在旧浏览器中无效。如果您还需要支持旧浏览器，请使用常规循环（例如for）并使用常规函数而不是arrow function。

＆＃13;

[].forEach.call(document.querySelectorAll('[type="checkbox"]'), x => {
  x.addEventListener('change', () => {
    x.disabled = true;
  });
})

＆＃13;

<form>  
  <ol class="seats" type="A">
    <li class="seat">
      <input type="checkbox" id="1A" />
      <label for="1A">1A</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1B" />
      <label for="1B">1B</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1C" />
      <label for="1C">1C</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1D" />
      <label for="1D">1D</label>
    </li>
    <li class="seat">
      <input type="checkbox"  disabled id="1E" />
      <label for="1E">Occupied</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1F" />
      <label for="1F">1F</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1G" />
      <label for="1G">1G</label>
    </li>
    <li class="seat">
      <input type="checkbox" id="1H" />
      <label for="1H">1H</label>
    </li>
  </ol>
</form>

＆＃13;

旧浏览器的示例（untestet但应该可以使用）：

var checkboxes = document.querySelectorAll('[type="checkbox"]');
for(var i = checkboxes.length; i--;) {
    checkboxes[i].addEventListener('change', function() {
        checkboxes[i].disabled = true;
    });
}

Answer 3

选择输入
forEach over the inputs
为每个输入
禁用onClick事件侦听器回调中的复选框。

像这样：

static func preloadImage(sku: String)  {
    // If the token exists AND is VALID (not expired) - Get the image.

    let group = DispatchGroup()
    var downloadTask : RetrieveImageDownloadTask? = nil

    if ImageManager.tokenExists() && ImageManager.tokenIsNotExpired(){

        let imageURL = ImageManager.URLBuilder(sku: sku)

        // Create the request and add the token string to the authorization header
        var urlRequest = try! URLRequest(url: URL(string: imageURL)!)
        urlRequest.setValue("Bearer \(ImageManager.getTokenString()!)", forHTTPHeaderField: "Authorization")
        downloadTask = NetRequest.downloadImage(urlRequest: urlRequest, sku: sku)
    }
    // Else if the token exists AND is INVALID (expired) - Delete the old token, get a new one, and fetch the image
    else if ImageManager.tokenExists() && !ImageManager.tokenIsNotExpired(){
        print("Token expired... Getting new token.")


        _ = ImageManager.deleteToken()
        if let tokenRequest = NetRequest.newTokenRequest(url: "http://\(UrlHelper.buildUrlFrom(SettingsManager.serverURL))"){
            group.enter()
            tokenRequest.requestPreloadJWTToken(){
                let imageURL = ImageManager.URLBuilder(sku: sku)

                // Create the request and add the token string to the authorization header
                var urlRequest = try! URLRequest(url: URL(string: imageURL)!)
                urlRequest.setValue("Bearer \(ImageManager.getTokenString()!)", forHTTPHeaderField: "Authorization")

                print("Token renewed. Fetching image...")
                downloadTask = NetRequest.downloadImage(urlRequest: urlRequest, sku: sku)
                group.leave()
            }
        }
    }
    // If the token doesn't exist, request a new one and fetch the image.
    else{
        print("Requesting new token...")

        if let tokenRequest = NetRequest.newTokenRequest(url: "http://\(UrlHelper.buildUrlFrom(SettingsManager.serverURL))"){
            group.enter()
            tokenRequest.requestPreloadJWTToken() {
                print("Token aquired. Fetching image...")
                let imageURL = ImageManager.URLBuilder(sku: sku)

                // Create the request and add the token string to the authorization header
                var urlRequest = try! URLRequest(url: URL(string: imageURL)!)
                urlRequest.setValue("Bearer \(ImageManager.getTokenString()!)", forHTTPHeaderField: "Authorization")

                downloadTask = NetRequest.downloadImage(urlRequest: urlRequest, sku: sku)
                group.leave()
            }
        }
    }
    // This should always happen
    group.notify(queue: DispatchQueue.main) {
       MainController.imageDownloadTasks.append(downloadTask!)
    }
}

JSBIN示例：

https://jsbin.com/cicenon/edit?html,js,output

如何在用户提交选项后将复选框更改为禁用？

3 个答案: