Question

当我选择框时，我希望文本字段可以编辑。起初它可以工作，但是如果我重新加载带有选中框的页面，它将与它应该做的相反（即重新加载页面后，当未选中框时，文本字段是可编辑的;当检查时，它们变得不可编辑）

<table>
<tr>    
    <td>
        <input type="checkbox" name="Download_Limit" value="download" class="checkme"/>Download Limit
        <br/>   
        <input type="text" name="download" class="text required" id="Download_Input" size="3">
        <label class="description" for="Expire">Downloads</label>   
    </td>
</tr>
<tr>    
    <td>
        <input type="checkbox" name="Time_Limit" value="time"  class="checkme"/>Time Limit
        <br/>
        <input type="text" name="time" class="text required" id="Time_Input" size="3">
        <label class="description" for="Expire">Hours</label>
    </td>
</tr>

我的Javascript

$('.checkme').attr('checked', false);
$('.checkme').click(function(){
    if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
        $('input[name='+ $(this).attr('value')+']').attr('disabled', true);
    }else{
        $('input[name='+ $(this).attr('value')+']').attr('disabled', false);
    }
 });

Answer 1

这是我要做的。首先，设置所需的所有默认值：

// Set default page values on load...
$('.checkme').prop('checked', false);
$('input[type="text"]').prop('disabled', true).val('');

// Then setup events...
$('.checkme').on('click', function () {
    var $this = $(this);
    if($('input[name='+ $this.val() +']').prop('disabled')){
        $('input[name='+ $this.val()+']').prop('disabled', false);
    } else {
        $('input[name='+ $this.val()+']').prop('disabled', true);
    }
});

我们在这里改变了一些事情。让我解释一下。

首先，我们已将.attr('checked'...)和.attr('disabled'...)更改为使用.prop()。 已选中 和 已停用 属性不是属性。
我们现在使用.on()附加活动。这只是我喜欢的方法，但只需执行.click()即可。
我们首先将元素保存到局部变量$this中。这使得jQuery不必在同一个函数中多次重新遍历DOM。
我已将.attr('value')简化为速记.val()。
最后，我们通过删除否定条件并允许JavaScript使用 truthy / falsy 条件来简化您的if语句。

Fiddle

其他一些注意事项：

我知道这是一种传统的页面布局方法，但我强烈建议不要使用表来定位元素。在页面布局中，表格和结果的合理使用并不恰当。查看<div>和<span>元素以布置代码，并尝试使用 CSS 来设置样式，以便按照您想要的方式显示。

此外，您似乎正在格式化 XHTML 语法中的 HTML 。这很好，但我建议你在关闭标签时保持一致。您的两个<input />元素标记未正确关闭。

// This...
<input type="text" name="download" class="text required" id="Download_Input" size="3">

// Should be this...
<input type="text" name="download" class="text required" id="Download_Input" size="3" />

// And this...
<input type="text" name="time" class="text required" id="Time_Input" size="3">

// Should be this...
<input type="text" name="time" class="text required" id="Time_Input" size="3" />

确保您的标记方法一致。这种不一致会导致标记无效。

最后，我不相信您可以将<tr>个元素直接嵌套在<table>元素中。我认为他们必须在<thead>，<tbody>或<tfoot>元素内。同样，省略这些元素会导致无效的标记。

Answer 2

试试 DEMO 。我觉得它更优雅。

$('.checkme').click(function() {
  var input = $(this).closest('td').find('input[type="text"]');
  if (input.is(':disabled')){ 
  input.attr('disabled', false);
  }else{
   input.attr('disabled', true);
  }
});

此外，您的输入类型=“文本”标记应禁用如下：

<input type="text" disabled="disabled" name="time" class="text required" id="Time_Input" size="3" />

复选框禁用页面重新加载Jscript

2 个答案: