1

我的网站上有一个数据输入表单，其中包含多个复选框、两个单选按钮和一个文本字段。如果选择了我的单选按钮之一，我想让文本字段不可编辑。如果客户尝试输入，则会显示错误消息。我是 Jquery 和网络编码的新手，所以找不到相关答案。

单选按钮和文本区域如下

    <form method="post" class="required-form" action="php/addcompanyengine.php">
  <ul class="forms">


    <p class="Region">Please select the type of listing you desire</p>
    <ol>
        <li><label class="checkbox">Bronze Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Bronze" checked></li>
        </ol>
        <ol>
        <li><label class="checkbox">Silver Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Silver"></li>
    </ol>



      <label for="Description">Description:<br /><br />
            (Silver listings only <br /> <br />
            Maximum 400 characters)</label>
            <textarea name="Description" cols="20" id="Description" maxlength="400" ></textarea>

基本上，如果客户将单选按钮留在青铜（默认）上，我希望文本字段不可用，如果他们选择银色，我希望他们可以输入。

非常感谢，非常感谢。

4

3 回答 3

0

假设您已经加载了 jQuery（注意 class 属性而不是 ID）：

<ol>
    <li><label class="checkbox">Bronze Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Bronze" checked></li>
    </ol>
    <ol>
    <li><label class="checkbox">Silver Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Silver"></li>
</ol>

<script type="text/javascript">
    $(document).ready(function() {
        $('.listing').change({
            if ($(this).val() == 'Bronze') {
                $('#Description').attr('readonly','readonly');
            } else {
                $('#Description').removeAttr('readonly');
            }
        });
    });
</script>

你可以在这里看到它的实际效果：http: //jsfiddle.net/AZ7wJ/

如果您希望 textarea 原本也是不可编辑的，您可以将readonly="readonly"属性添加到它。

于 2012-09-19T14:09:04.220 回答
0

在开始之前：

  • 更改无线电inputID，使其不同。
  • 将readonly属性添加到您的textarea.

假设您使用listingBronze的是青铜收音机input id。

//we listen to the change event
$("#listingBronze").change(function(event){
    //we tell readonly is equal to bronze checked status
    $('#Description').prop('readonly',(!!$(this).prop("checked")));
});

这个简单。由于readonly = checked代码变得非常小。

注意：使用 !! 确保该值将是布尔值，因为它不是非值。

（可选）您可以hide和showtextarea，在过程中丢弃该readonly属性：

$("#listingBronze").change(function(event){
    $('#Description').show();
    if(!!$(this).prop("checked")) $('#Description').hide();
});

我们在每次更改时显示 textarea，然后检查checked属性并隐藏如果为真。

于 2012-09-19T14:17:55.713 回答
0

我怀疑接受的答案应该是

<script type="text/javascript">
    $(document).ready(function() {
        $('.listing').change(function() {
            if ($(this).val() == 'Bronze') {
                $('#Description').attr('readonly','readonly');
            } else {
                $('#Description').removeAttr('readonly');
            }
        });
    });
</script>

注意修改后的function()

于 2014-08-22T10:08:35.570 回答