如何在我单击对应的复选框时使不可编辑的文本框可编辑

There are one check box and a non editable text box corresponding to it. When I click on check box, corresponding non editable text box should become an editable text box. How can I achieve this?

有一个复选框和一个与其对应的不可编辑文本框。当我单击复选框时,相应的不可编辑文本框应该成为可编辑的文本框。我怎样才能做到这一点?

2 个解决方案

#1

This code actually works fine, and ready to use.

这段代码实际上工作正常,随时可以使用。

This is the form stuff:

这是形式的东西:

<form id="myGame" name="myGame" action="" method="post">
<input type="radio" name="checkme" id="checkme" onClick="openTheHouse();" >Open Sesame
<input name="open_id" id="openid" type=text disabled="disabled">
</from>

And the Script: its pretty cool actually, nothing complicated in this script.

和剧本:其实非常酷,在这个剧本中并不复杂。

<script type="text/javascript">
function openTheHouse()
{

if(document.myGame.checkme.checked == true)
{
document.myGame.openid.disabled = false ;
}

}
</script>

thats it, all done. Certainly i believe it works.

就是这样,一切都完成了。当然我相信它有效。

#2

Basically:

$('#some-checkbox').click(function() {
   $('#some-textfield').prop('disabled', !$(this).is(':checked'));
});

Now, how you go about finding the corresponding text box depends on your markup. One way could be to give the text box a class that is the ID of the checkbox. Applying that to all checkboxes might look something like this:

现在,如何查找相应的文本框取决于您的标记。一种方法是给文本框一个类,该类是复选框的ID。将其应用于所有复选框可能如下所示:

$(':checkbox').click(function() {
   var box = $(this);
   $('.' + box.attr('id')).prop('disabled', !box.is(':checked'));
});

Otherwise, the text field may be located by its position on the DOM:

否则,文本字段可能位于DOM上的位置:

<div class="wrapper">
   <input type="checkbox">
   ...
   <div>
      <input type="text" disabled="disabled" />
   </div>
</div>

You might then do something like:

然后你可以这样做:

$(':checkbox').click(function() {
   var box = $(this);
   box.closest('.wrapper').find('input[type=text]').prop('disabled', !box.is(':checked'));
});

#1