请按照一个checkbox，一个input进行排版，并且checkbox如果被选中则input可用，如果checkbox未被选中则input不可用

可以使用HTML和JavaScript来实现这个功能。以下是一个示例代码：

<label>
  <input type="checkbox" id="myCheckbox">
  Enable input
</label>
<br>
<input type="text" id="myInput" disabled>

<script>
  const checkbox = document.getElementById("myCheckbox");
  const input = document.getElementById("myInput");

  checkbox.addEventListener("change", function() {
    input.disabled = !checkbox.checked;
  });
</script>

在这个代码中，我们首先创建一个包含一个checkbox和一个label的标签。当用户点击label时，checkbox会被选中/取消选中。我们还创建了一个输入框，并将其禁用（即不可用）。

在JavaScript部分，我们首先获取checkbox和input的引用，然后附加一个事件监听器，以便在用户更改checkbox的状态时更新输入框的禁用状态。如果复选框被选中，则输入框将启用；否则，它将被禁用。

相关问题

每一个input前都要有一个checkbox，如果checkbox选中则input可用，如果未选中则对应的input不可用

好的，根据您的要求，稍微修改一下之前的代码，实现每个input前都有一个checkbox，根据checkbox的状态来判断输入框是否可用，具体如下：

<template>
  <div>
    <el-checkbox-group v-model="checkedValues">
      <el-checkbox v-for="(item, index) in config" :key="index" :label="item.label" :disabled="item.disabled" @change="handleCheckboxChange(index)"></el-checkbox>
    </el-checkbox-group>
    <el-input v-for="(item, index) in config" :key="index" v-model="item.value" :disabled="!item.checked"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: [
        { label: '选项1', disabled: false, checked: false, value: '' },
        { label: '选项2', disabled: true, checked: false, value: '' },
        { label: '选项3', disabled: true, checked: false, value: '' }
      ],
      checkedValues: []
    }
  },
  methods: {
    handleCheckboxChange(index) {
      this.config[index].checked = !this.config[index].checked
    }
  }
}
</script>

在模板中，将el-checkbox的label属性去掉，这样就不会在多选框的后面显示label了，而是将label作为checkbox的内容。同时，在el-input的disabled属性上，根据input对应的checkbox的checked属性来判断输入框是否可用，如果checkbox未选中，则输入框不可用。

在data中，为每个配置项增加一个checked属性，用于存储对应的checkbox是否选中。在handleCheckboxChange方法中，更新对应的checked属性即可。

希望这次回答能够满足您的需求，如有任何问题，欢迎再次提问。

js判断input[type=checkbox]是否被选中

可以使用JavaScript中的`checked`属性来判断`input[type=checkbox]`是否被选中。以下是一个示例：

var checkbox = document.querySelector('input[type="checkbox"]');
if (checkbox.checked) {
    console.log("复选框已被选中");
} else {
    console.log("复选框未被选中");
}

在上述代码中，我们首先使用`document.querySelector`选择器选择到目标复选框元素，然后通过`checked`属性来检查该复选框是否被选中。如果`checked`属性为`true`，则表示复选框已被选中；如果为`false`，则表示复选框未被选中。