Question

我有一个复选框。当我点击它时，我禁用了textarea。我有4组复选框和textareas。

l1

textarea的

<input type="checkbox" name="detailsgiven" onchange="toggleDisabled_new_order_1(this.checked)" selected/>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled_new_order_2(this.checked)" selected/>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled_new_order_3(this.checked)" selected/>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled_new_order_4(this.checked)" selected/>

我必须为每个

创建函数

 <textarea name="description" class="form-control m-input m-input--solid" id="toggleDisabled_new_order_1"disabled>DefaultText</textarea>
 <textarea name="description" class="form-control m-input m-input--solid" id="toggleDisabled_new_order_2"disabled>DefaultText</textarea>
 <textarea name="description" class="form-control m-input m-input--solid" id="toggleDisabled_new_order_3"disabled>DefaultText</textarea>
 <textarea name="description" class="form-control m-input m-input--solid" id="toggleDisabled_new_order_4"disabled>DefaultText</textarea>

应该有一种更简单的方法来处理它而无需复制相同的代码

由于我来自PHP，我虽然切换会成功，但我无法理解。

Answer 1

您可以这样做：

HTML：

<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked,1)" 
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked,2)"

JS：

function toggleDisabled(_checked,num) {
        document.getElementById('element_id_'+num).disabled = _checked ? false : true;
}

它基本上只是将设定的数字作为另一个参数传递给你的切换功能。在函数内部，只需在执行the document.getElementById时连接该数字，以便仅禁用该特定数字。

Answer 2

您可以从函数中提取id参数，以便Don't Repeat Yourself：

function toggleDisabled_new_order_1(id, _checked) {
    document.getElementById('element_id_' + id).disabled = _checked ? false : true;
}

正如RobG的评论中所述，您可以使用_checked值，而不是使用三元运算符：

document.getElementById('element_id_' + id).disabled = !_checked;

Answer 3

<input type="checkbox" name="detailsgiven" id="input1" onchange="toggleDisabled_new_order_1(event,'idname')" selected/>

<textarea name="description" class="form-control m-input m-input--solid" id="idname">DefaultText</textarea>

function toggleDisabled_new_order_1(e,idname) {

    document.getElementById(idname).disabled = e.target.checked ? true : false;
}

您可以使用事件在onChange函数中传递textarea的Id名称。如果选中复选框，它将自动禁用textarea

获取元素id并使用javascript切换内部函数

3 个答案: