Question

我的网站上有一个数据输入表单，其中包含多个复选框，两个单选按钮和一个文本字段。如果选中了我的一个单选按钮，我想让文本字段不可编辑。如果客户尝试输入错误消息，则显示错误消息。我是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>

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

非常感谢，非常感谢。

Answer 1

假设你已经加载了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"属性。

Answer 2

开始之前：

更改广播input ID，使其不同。
将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和show textarea，在此过程中放弃readonly属性：

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

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

Answer 3

我怀疑接受的答案应该是

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

注意更改后的函数（）

选择无线电时隐藏文本框

3 个答案: